경호의 개발일기장

1탄에서는 기초적인 원리를 설명했다고 하면 2탄인 지금에서는 그것을 플러그인(?)화를 한 것입니다. 틀은 알고 있으니 매번적기는 뭐하고 아예 함수화를 해버린 것이지요 var의 우선순위 적용하는 방법 적용하느라고 애먹었네요 중간단계가 빠져 있으면 상위에 적은 값이 적용되도록 작성한 코드입니다. 사용법은 .flexgrid-list .flexgrid-item 을 사용하면 됩니다. 추가로 작성된 responsive-height도 마찬가지로 html단에서 height를 반응형으로 조절할 수 있게 됩니다. 자세한 어트리뷰트의 값 넣는 방법은 아래 코드를 확인해주세요 //아래는 scss입니다 .responsive-height { height: var(--height); } .flexgrid { &-list { dis..

쓰지마세요 ㅎㅎ 구식 코드이니 참고만 해주시기 바랍니다. default.scss //default.scss //----------------------------------------------// // 목차 //----------------------------------------------// // 1. 색상 선택 // 2. 헬퍼 // 3. 공통 // 4. 페이지별 커스텀 // 5. 반응형 //----------------------------------------------// // 1. 색상 선택 //----------------------------------------------// $text-primary : red; $text-secondary : red; $text-danger : re..

/* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 이렇게 주석을 감사준다.

설치 Node.js 설치 & 확인 npm init npm install node-sass@latest --save VSCode 익스텐션 설치 live sass compiler