Sass
CSS를 작성하다보면 선택자가 점점 길어지기 시작한다. 분별하기 쉽게 작성하기위해 Sass라는 프레임워크를 사용한다.
CSS 전처리기
Sass로 작업 > 처리 > CSS 구조로 출력
Atom 패키지 설치
$ brew install node
$ node -v
v4.6.0
$ sudo npm install node-sass -g
- sass-autocompile 패키지 설치
- 설정 : 파일 저장 위치 변경
../css/$1.min.css
../css/$1.compact.css
../css/$1.nested.css
../css/$1.css
Sass 사용법
주석
.scss 파일에서는 //
로 주석을 표시한다. // 주석
으로 작성된 부분은 css로 변환될 때 사라지지만 /* 주석 */
으로 작성된 부분은 css파일에 남는다.
부모참조 선택자
하위선택자 내부에서 &
사용하면 부모를 참조한다.
a {
text-decoration: none;
&:hover {
color: #58b5d3;
}
import
.scss 파일명이 _
로 시작하면 .css파일로 생성되지 않는다. 주로 변수를 _variables.scss
파일에 별도로 저장하여 관리한다. 저장한 파일은 import
하여 사용한다.
@import '_variables';
선택자 상속
@extend
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
다방 페이지보고 만들기