Sass

CSS를 작성하다보면 선택자가 점점 길어지기 시작한다. 분별하기 쉽게 작성하기위해 Sass라는 프레임워크를 사용한다.

CSS 전처리기

Sass로 작업 > 처리 > CSS 구조로 출력

Atom 패키지 설치

$ brew install node
$ node -v
v4.6.0
$ sudo npm install node-sass -g
  1. sass-autocompile 패키지 설치
  2. 설정 : 파일 저장 위치 변경
../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;
}

다방 페이지보고 만들기

결과 X 코드