윤주

윤주

꾸준히 기록하자

Sass와 SCSS

CSS

Cascading Style Sheets
마크업 언어가 실제 표시되는 방법을 기술하는 언어
W3C의 웹 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다


Sass

Syntactically Awesome StyleSheets
종속형 시트(CSS)로 해석 및 컴파일 되는 스크립트 언어
  • indented syntax
    • 규칙 분리를 위해 들여쓰기를 사용하여 코드 블록과 새줄 문자를 구분
  • SCSS (Sassy CSS)
    • CSS와 비슷한 블록 형식을 사용
    • 블록 안의 줄을 구분하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지한다

Sass 혹은 SCSS

Sass라는 이름의 의미에 관해 꽤 많은 혼동이 있습니다.
그럴 만한 이유가 있죠: Sass는 전처리기와 그 구문 두 가지를 의미합니다. 좀 불편하죠, 안 그런가요?

Sass는 처음에 들여쓰기의 감지를 그 핵심 특성으로 갖는 구문을 가리켰습니다.
얼마 지나지 않아, Sass를 유지하는 사람들은 Sassy CSS를 의미하는 SCSS라는 CSS 친화적인 구문을 제공함으로써
Sass와 CSS 사이의 차이를 좁히기로 결정했습니다. 
모토는 이렇습니다: 만약 유효한 CSS라면, 유효한 SCSS이다. 

그 이후로, Sass(전처리기)는 두 가지 다른 구문을 제공해 오고 있습니다: 
들여쓰기 구문으로도 알려진 Sass(전부 대문자가 아닙니다, 제발), 그리고 SCSS. 
둘은 정확히 동등한 기능을 갖고 있기 때문에 어느 것을 사용할지는 여러분에게 달렸습니다. 
지금 시점에서는 이것은 순전히 미관상의 문제입니다. 

Sass의 공백에 반응하는 구문은 중괄호, 세미콜론 그리고 다른 구두점 기호들을 없애기 위해 들여쓰기에 의존하며, 
이는 간결하고 짧은 구문으로 이어집니다. 
한편, SCSS는 주로 CSS에 올려진 작은 추가사항들이므로 배우기에 더 쉽습니다. 

저 자신은 CSS와 더 비슷하고 대부분의 개발자들에게 더 친숙하기 때문에 SCSS를 Sass보다 더 선호합니다. 
그런 이유로, SCSS가 이 가이드라인의 기본 구문입니다. 
옵션 패널에서 Sass의 들여쓰기 구문으로 바꾸실 수 있습니다.

Sass 가이드라인에서 발췌


구문 비교

변수

Sass

$primary-color: #3bbfce
$margin: 16px

.content-navigation
  border-color: $primary-color
  color: darken($primary-color, 10%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $primary-color

SCSS

$primary-color: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $primary-color;
  color: darken($primary-color, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

컴파일 결과 (CSS)

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

네스팅

Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

li
  font:
    family: serif
    weight: bold
    size: 1.3em

SCSS

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

컴파일 결과 (CSS)

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}


내 생각

Sass와 SCSS가 별개의 언어인 줄 알았는데 아니었다는 것에 충격받았다.

참고