[SASS] SASS 컴파일 style 종류

scss 를 컴파일 하는 style 은 4가지 스타일이 존재합니다.

1. nested

2. expanded

3. compact

4. compressed

일반 scss 문법을 통하여 css 로 어떻게 컴파일 되는지 확인해 보겠습니다.

scss

html{
    font-size:10px;
    body{
        color:red;
        font-family: serif;
    }
}

css

nested

sass 형식과 유사하게 nested된 css 파일이 생성됩니다. 기본값으로 옵션을 추가하지 않아도 기본 적용됩니다.

html {
  font-size: 10px; }
  html body {
    color: red;
    font-family: serif; }

expanded

표준적인 스타일의 css 파일이 생성됩니다.

html {
  font-size: 10px;
}
html body {
  color: red;
  font-family: serif;
}

compact (추천)

여러 룰셋을 한줄로 나타내는 스타일의 css 파일이 생성됩니다.

html { font-size: 10px; }
html body { color: red; font-family: serif; }

compressed (추천)

가능한 빈공간이 없는 압축된 스타일의 css 파일이 생성됩니다.

html{font-size:10px}html body{color:red;font-family:serif}

sass 컴파일은 node-seass 나 sass 가 설치 되어 있어야하며

명령어 종류를 확인하고 싶다면 설치후 sass -h 명령어를 입력하면 됩니다.

이상으로 sass 컴파일 style 종류에 대해서 알아봤습니다.