Sass 치트시트

이 글은Sass 공식 문서를 참고해 Sass(scss)에서 자주 사용하는 문법을 일부 정리해 놓은 레퍼런스/치트시트입니다. 이 글은 Sass의 모든 기능을 소개하고 있지 않습니다.

주석

sass에는 컴파일시 주석이 유지되는지의 여부에 따라 3가지 종류의 주석이 있습니다.

// 이 주석은 컴파일시 출력 CSS파일에 유지되지 않습니다.
/*
  이 주석은 컴파일 시 CSS파일에 유지됩니다.
  compressed모드에서는 유지되지 않습니다.
*/
/*! 이 주석은 compressed모드에서도 유지됩니다. */

중첩

CSS selector가 반복되는 경우 중첩을 통해 반복을 줄일 수 있습니다.

예를 들어 아래와 같은 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에서는 아래 처럼 쓸 수 있습니다.

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가 있습니다.

a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

위 CSS코드를 아래와 같이 &셀렉터를 이용해 중첩을 사용하면 코드의 가독성을 올릴 수 있습니다.

a {
    color: black;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

프로퍼티 중첩

CSS에서 동일한 접두사를 가지고 있는 일부 프로퍼티에도 중첩을 사용할 수 있습니다.

body {
    margin: {
        top: 5px;
        bottom: 10px;
    }
}

// 출력 css 파일
body {
    margin-top: 5px;
    margin-bottom: 10px;
}

변수 선언

Sass에서 변수를 선언하기 위해서는 $variable과 같이 앞에 $기호를 사용하면 됩니다. 변수에는 어떤 Sass 표현식도 대입할 수 있습니다.

$primary-color: #01579b;

body {
    $fontSize: 10px;
    font-size: $fontSize;
}

보간(Interpolation)

Interpolation을 이용하면 목표 CSS파일에 표현식을 동적으로 삽입할 수 있습니다. 문법은 #{expression}으로 자바스크립트의 문법과 #기호를 제외하면 동일합니다.

$header: 2;

// selector에 보간이 사용 가능합니다.
h#{$header} {
    $bottom: 'bottom';
    $margin-bottom: 1rem;
    // 프로퍼티 이름에 보간이 사용 가능합니다.
    margin-#{$bottom}: 0;
}

/* 변수에도 #{1 + 1} 보간이 사용 가능합니다. */

이 외에 보간을 쓸 수 있는 모든 경우는 공식 문서에서 확인할 수 있습니다.

@use

@use 규칙은 현재까지 Dart Sass만 지원하고 있는 규칙입니다. 만약 LibSass 또는 Ruby Sass를 사용중이라면 @import규칙을 사용해야 합니다.

@use 규칙은 다른 파일에서 작성된 Sass파일을 불러올 수 있습니다. @use 규칙은 파일에서 @forward 규칙을 제외한 가장 앞에 작성 되어야 합니다. 불러온 모듈의 멤버를 사용하기 위해선 <모듈 이름>.<멤버> 형식을 사용하면 됩니다.

// _module.scss
$margin: 10px;

html {
    margin: 0;
}

// style.scss
@use 'module';

body {
    margin: module.$margin;
}

// 출력 css파일
html {
    margin: 0;
}

body {
    margin: 10px;
}

@forward

@forward규칙은 @use와 유사하게 다른 Sass파일을 불러옵니다. 차이점은 다른 파일에서 @forward가 사용된 파일을 @use로 불러왔을 때 해당 파일에서 @forward로 불러들인 파일의 멤버를 네임스페이스 없이 사용할 수 있게 됩니다.

다시 말해서, A파일이 @forward로 B파일을 불러오고 C파일이 @use로 A파일을 불러오면 C파일에서 B파일의 멤버를 A.로 접근할 수 있게 됩니다.

@forward는 파일에서 가장 처음 사용해야 합니다.

// _module.scss
$margin: 10px;

// module2.scss
@forward 'module';

// style.scss
@use 'module2';

body {
    // $margin이 module2의 멤버인 것 처럼 사용합니다.
    margin: module2.$margin;
}

// 출력 css파일

body {
    margin: 10px;
}

@import

@import규칙은 @use와 유사하지만 네임스페이스를 나누지 않아 변수나 함수 등의 이름에 충돌이 일어날 수 있어 Sass 공식사이트에서는 권장하고있지 않습니다. 하지만 @use를 지원하지 않는 컴파일러를 사용 중이라면 @import를 사용해야 합니다. 이 경우 불러오는 파일의 식별자를 다른 파일과 충돌할 가능성이 적도록 작성하는 것이 중요합니다.

@mixin, @include

@mixin으로 코드를 생성해 놓으면 @include를 이용해 동일한 코드를 다른 여러 곳에서 사용할 수 있습니다. @mixin은 매개변수를 넘겨받을 수 있습니다.

@mixin flexbox($dir) {
    display: flex;
    flex-direction: $dir;
}

body {
    @include flexbox(column);
}

section {
    @include flexbox(row);
}

// 출력 css파일

body {
    display: flex;
    flex-direction: column;
}

section {
    display: flex;
    flex-direction: row;
}

@function

우리가 아는 함수입니다. @return으로 값을 반환해줍니다.

@function circumference($radius) {
    @return 2 * 3.14 * $radius;
}

body {
    margin: circumference(3rem);
}

// 출력 css파일

body {
    margin: 18.84rem;
}

@error, @warn

@error는 임의로 에러를 발생시키고 싶을 때 사용합니다. 사용 방법은 @error <에러 메세지>;입니다. 비슷하게 @warn은 워닝을 발생시킵니다. 사용 방법은 error와 동일합니다.

@debug

@debug규칙은 자바스크립트의 console.log함수와 같이 개발 과정에서 로그를 남기고 싶을 때 사용합니다. @debug <메세지>;를 사용하면 메세지 내용이 콘솔에 출력됩니다.

제어문

@if, @else, @else if

우리가 알고 있는 if, else 문입니다.

@if <exp> {
    <exp>
} @else if <exp> {
    <exp>
} @else {
    <exp>
}

@each

리스트/맵을 순회하면서 값을 사용해야 할 때 사용하는 반복문입니다.

@each <변수> in <리스트|맵> { code }의 형태로 사용합니다.

$headers: (
    1: 1.8rem,
    2: 1.4rem,
    3: 1rem,
    4: 0.8rem
);

@each $i, $fs in $headers {
    h#{$i} {
        font-size: $fs;
    }
}

// 출력 css파일
h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1rem;
}

h4 {
    font-size: 0.8rem;
}

@for

주로 반복문에서 인덱스가 필요할 때 사용하는 반복문입니다.

@for <variable> from <exp> to <exp> { code } 또는

@for <variable> from <exp> through <exp> { code }의 형태로 사용합니다. to를 쓰면 마지막 인덱스는 배제하고 through를 쓰면 포함합니다.

위의 @each예제를 @for로 바꿔보면 아래와 같습니다.

@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 <exp> { code }의 형태로 사용합니다.