이 글은Sass [공식 문서](https://sass-lang.com/documentation)를 참고해 Sass(scss)에서 자주 사용하는 문법을 일부 정리해 놓은 레퍼런스/치트시트입니다. 이 글은 Sass의 모든 기능을 소개하고 있지 않습니다. ## 주석 sass에는 컴파일시 주석이 유지되는지의 여부에 따라 3가지 종류의 주석이 있습니다. ```scss // 이 주석은 컴파일시 출력 CSS파일에 유지되지 않습니다. /* 이 주석은 컴파일 시 CSS파일에 유지됩니다. compressed모드에서는 유지되지 않습니다. */ /*! 이 주석은 compressed모드에서도 유지됩니다. */ ``` ## 중첩 CSS selector가 반복되는 경우 중첩을 통해 반복을 줄일 수 있습니다. 예를 들어 아래와 같은 CSS 코드가 있습니다. ```css nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } ``` 위 코드를 sass에서는 아래 처럼 쓸 수 있습니다. ```scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } ``` ### 부모 셀렉터 중첩을 쓸 때 내부에서 특수한 부모 셀렉터 `&`를 사용할 수 있습니다. 예를 들어 아래와 같이 a 태그와 a:hover에 각각 스타일이 있는 CSS가 있습니다. ```css a { color: black; text-decoration: none; } a:hover { text-decoration: underline; } ``` 위 CSS코드를 아래와 같이 `&`셀렉터를 이용해 중첩을 사용하면 코드의 가독성을 올릴 수 있습니다. ```scss a { color: black; text-decoration: none; &:hover { text-decoration: underline; } } ``` ### 프로퍼티 중첩 CSS에서 동일한 접두사를 가지고 있는 일부 프로퍼티에도 중첩을 사용할 수 있습니다. ```scss body { margin: { top: 5px; bottom: 10px; } } ``` ```scss // 출력 css 파일 body { margin-top: 5px; margin-bottom: 10px; } ``` ## 변수 선언 Sass에서 변수를 선언하기 위해서는 `$variable`과 같이 앞에 $기호를 사용하면 됩니다. 변수에는 어떤 Sass 표현식도 대입할 수 있습니다. ```scss $primary-color: #01579b; body { $fontSize: 10px; font-size: $fontSize; } ``` ## 보간(Interpolation) Interpolation을 이용하면 목표 CSS파일에 표현식을 동적으로 삽입할 수 있습니다. 문법은 `#{expression}`으로 자바스크립트의 문법과 #기호를 제외하면 동일합니다. ```scss $header: 2; // selector에 보간이 사용 가능합니다. h#{$header} { $bottom: 'bottom'; $margin-bottom: 1rem; // 프로퍼티 이름에 보간이 사용 가능합니다. margin-#{$bottom}: 0; } /* 변수에도 #{1 + 1} 보간이 사용 가능합니다. */ ``` 이 외에 보간을 쓸 수 있는 모든 경우는 [공식 문서](https://sass-lang.com/documentation/interpolation)에서 확인할 수 있습니다. ## @use _**@use** 규칙은 현재까지 Dart Sass만 지원하고 있는 규칙입니다. 만약 LibSass 또는 Ruby Sass를 사용중이라면 **@import**규칙을 사용해야 합니다._ **@use** 규칙은 다른 파일에서 작성된 Sass파일을 불러올 수 있습니다. **@use** 규칙은 파일에서 **@forward** 규칙을 제외한 가장 앞에 작성 되어야 합니다. 불러온 모듈의 멤버를 사용하기 위해선 <모듈 이름>.<멤버> 형식을 사용하면 됩니다. ```scss // _module.scss $margin: 10px; html { margin: 0; } ``` ```scss // style.scss @use 'module'; body { margin: module.$margin; } ``` ```scss // 출력 css파일 html { margin: 0; } body { margin: 10px; } ``` ## @forward **@forward**규칙은 **@use**와 유사하게 다른 Sass파일을 불러옵니다. 차이점은 다른 파일에서 **@forward**가 사용된 파일을 **@use**로 불러왔을 때 해당 파일에서 **@forward**로 불러들인 파일의 멤버를 네임스페이스 없이 사용할 수 있게 됩니다. 다시 말해서, A파일이 **@forward**로 B파일을 불러오고 C파일이 **@use**로 A파일을 불러오면 C파일에서 B파일의 멤버를 A.로 접근할 수 있게 됩니다. **@forward**는 파일에서 가장 처음 사용해야 합니다. ```scss // _module.scss $margin: 10px; ``` ```scss // module2.scss @forward 'module'; ``` ```scss // style.scss @use 'module2'; body { // $margin이 module2의 멤버인 것 처럼 사용합니다. margin: module2.$margin; } ``` ```scss // 출력 css파일 body { margin: 10px; } ``` ## @import **@import**규칙은 **@use**와 유사하지만 네임스페이스를 나누지 않아 변수나 함수 등의 이름에 충돌이 일어날 수 있어 Sass 공식사이트에서는 권장하고있지 않습니다. 하지만 **@use**를 지원하지 않는 컴파일러를 사용 중이라면 **@import**를 사용해야 합니다. 이 경우 불러오는 파일의 식별자를 다른 파일과 충돌할 가능성이 적도록 작성하는 것이 중요합니다. ## @mixin, @include **@mixin**으로 코드를 생성해 놓으면 **@include**를 이용해 동일한 코드를 다른 여러 곳에서 사용할 수 있습니다. **@mixin**은 매개변수를 넘겨받을 수 있습니다. ```scss @mixin flexbox($dir) { display: flex; flex-direction: $dir; } body { @include flexbox(column); } section { @include flexbox(row); } ``` ```css // 출력 css파일 body { display: flex; flex-direction: column; } section { display: flex; flex-direction: row; } ``` ## @function 우리가 아는 함수입니다. **@return**으로 값을 반환해줍니다. ```scss @function circumference($radius) { @return 2 * 3.14 * $radius; } body { margin: circumference(3rem); } ``` ```css // 출력 css파일 body { margin: 18.84rem; } ``` ## @error, @warn **@error**는 임의로 에러를 발생시키고 싶을 때 사용합니다. 사용 방법은 `@error <에러 메세지>;`입니다. 비슷하게 **@warn**은 워닝을 발생시킵니다. 사용 방법은 **error**와 동일합니다. ## @debug **@debug**규칙은 자바스크립트의 console.log함수와 같이 개발 과정에서 로그를 남기고 싶을 때 사용합니다. `@debug <메세지>;`를 사용하면 메세지 내용이 콘솔에 출력됩니다. ## 제어문 ### @if, @else, @else if 우리가 알고 있는 if, else 문입니다. ```scss @if { } @else if { } @else { } ``` ### @each 리스트/맵을 순회하면서 값을 사용해야 할 때 사용하는 반복문입니다. `@each <변수> in <리스트|맵> { code }`의 형태로 사용합니다. ```scss $headers: ( 1: 1.8rem, 2: 1.4rem, 3: 1rem, 4: 0.8rem ); @each $i, $fs in $headers { h#{$i} { font-size: $fs; } } ``` ```scss // 출력 css파일 h1 { font-size: 1.8rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1rem; } h4 { font-size: 0.8rem; } ``` ### @for 주로 반복문에서 인덱스가 필요할 때 사용하는 반복문입니다. `@for from to { code }` 또는 `@for from through { code }`의 형태로 사용합니다. to를 쓰면 마지막 인덱스는 배제하고 through를 쓰면 포함합니다. 위의 **@each**예제를 **@for**로 바꿔보면 아래와 같습니다. ```scss @use 'sass:list'; $headers: 1.8rem, 1.4rem, 1rem, 0.8rem; @for $i from 1 through 4 { h#{$i} { font-size: list.nth($headers, $i); } } // 출력은 위 @each를 사용한 예제와 동일합니다. ``` ### @while 역시 우리가 알고 있는 while문입니다. 조건이 참인 경우 블럭 내의 코드를 계속 반복합니다. `@while { code }`의 형태로 사용합니다.

Sass

Sass 치트시트