Sass란?

아래는 Sass 공식 홈페이지의 가이드(sass-lang.com/guide)를 발췌 번역하고 생활코딩(opentutorials.org/module/237/2489)의 설명을 일부 참고해 정리한 글입니다.

---

- 프로젝트 규모가 커지면 HTML 요소를 꾸며주는 선택자(selector)가 중복되면서 유지 보수에 비효율이 발생하는데 이를 보완해주는 것이 바로 전처리기(preprocessor)다.

- 대표적인 전처리기로는 Less, Sass(SCSS), Stylus가 있다.

- Sass(Syntactically Awesome Style Sheets)는 2006년에 등장해 성숙도와 사용도가 높은 편이다. 

- Sass엔 CSS엔 없는 변수(variables), 중첩(nesting), 재사용(mixins), 상속(inheritance) 등의 문법이 있다.

- Sass를 설치하고 Sass 명령어를 이용해 브라우저가 읽을 수 있는 CSS로 컴파일해서 사용한다.

- Sass 파일의 확장자는 .scss다. 

- SCSS는 Sass 3버전부터 추가된 CSS 상위집합(Superset)으로 CSS와 거의 같은 문법으로 Sass 기능을 지원하며 Sass와 { } ; 유무에 차이가 있다.

- Sass는 { } ;를 사용하지 않아 가독성이 좋고 간결하며 SCSS는 CSS 문법과 유사하여 코드 통합이 쉽다.

 

---

--watch 명령어를 이용하면 .scss 파일을 수정, 저장할 때마다 해당 소스 파일을 확인하여 CSS로 재컴파일한다.

app/sass 폴더에 있는 모든 수정 파일을 확인해 CSS로 컴파일한 뒤 public/stylesheets 폴더에 저장하는 예시

---

변수(Variables)

color나 font 등 CSS에서 재사용하려는 값을 저장하는 곳. 

$ 표시를 이용해 변수로 만든다. 

아래 예시처럼 Sass 처리기에서 $font-stack, $primary-color 변수에 값을 정의하면 CSS에서 컴파일되어 쓰인다.

 

---

중첩(Nesting)

CSS는 HTML과 달리 시각적 위계가 분명하지 않다.

Sass를 거치면 CSS 선택자를 HTML처럼 부모(조상), 자식(자손) 관계가 드러나게 쓸 수 있다.

중첩이 과하면 오히려 유지, 보수가 어려울 수 있다는 걸 명심하자.

아래 예시를 보면 조상 Sass에선 CSS와 달리 nav를 한 번만 적어주고도 들여쓰기로 위계가 적용된다.

 

사이트 내비게이션의 전형적인 CSS 코드 예

---

파일 분할(Partials)

CSS 코드 조각이 담긴 부분 Sass 파일을 만들어 다른 Sass 파일 안에 포함시킬 수 있다.

CSS를 모듈화하고 유지 보수가 용이해지는 방법.

가령 _partials.scss처럼 scss 파일명 앞에 _가 붙으면 Sass가 부분 파일이라고 판단해 CSS 파일로 바꾸지 않는다.

Sass 부분 파일은 @use 문법과 쓰인다. 

 

---

모듈(Modules)

Dart Sass만 @use 문법을 지원 / Ruby Sass, LibSass는 @import 문법을 써야 함

한 파일 안에 Sass를 전부 쓸 필요 없이 @use 키워드로 모듈처럼 필요한 변수, 함수, mixins만 불러와 쓸 수 있다.

 

---

재활용(Mixins)

mixin은 CSS 선언 그룹을 사이트에 고루 재사용하고 싶을 때 쓴다.

mixin 사용의 좋은 예: 벤더 픽스

SCSS는 @mixin , @include

Sass는 =, +

 

---

확장/상속(Extend/Inheritance)

@extend 키워드를 쓰면 선택자(selector) 간에 CSS 속성(property)을 공유할 수 있다.

SCSS
/* .message .success .error .warning 선택자는 모두 %message-shared를 상속받아 적용됨
(%equal-heights는 상속되지 않아 적용되지 않음) */

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

CSS
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

---

연산자(Operators)

 +, -, *, /, % 연산자를 이용하여 px을 %로 나타낼 때 특히 유용하게 쓴다.

---

Sass 설치

rubyinstaller.org/downloads/

Downloads