SASS (Syntactically Awesome Style Sheets)

Sass는 CSS를 더 강력하고 우아하게 작성할 수 있게 해주는 전처리기이다.

Sass는 기존 CSS의 한계를 극복하기 위해 만들어졌으며, 두 가지 문법을 제공한다:

  1. SCSS(Sassy CSS)
  2. 들여쓰기 기반의 Sass
    SCSS는 CSS와 완벽하게 호환되는 문법을 가지고 있어 더 널리 사용된다.

기본적인 SCSS 예시:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 변수 정의
$primary-color: #3498db;
$spacing: 20px;

.container {
    max-width: 1200px;
    padding: $spacing;
    
    // 중첩된 규칙
    .header {
        background-color: $primary-color;
        color: white;
        
        // 중첩된 선택자와 &(부모 선택자) 참조
        &:hover {
            background-color: darken($primary-color, 10%);
        }
    }
}

장점

  1. 코드 재사용성 향상: 변수와 믹스인을 통해 코드 중복을 줄일 수 있다.
  2. 유지보수 용이성: 구조화된 코드로 인해 스타일시트의 관리가 쉬워진다.
  3. 생산성 향상: 간결한 문법과 강력한 기능으로 개발 속도를 높일 수 있다.
  4. CSS 호환성: 기존 CSS와 완벽히 호환되어 점진적으로 도입할 수 있다.

Sass의 핵심 기능들

  1. 변수 시스템
    Sass는 강력한 변수 시스템을 제공하여 값을 재사용하기 쉽게 만든다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$brand-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
);

body {
    font-family: $font-stack;
    color: map-get($brand-colors, primary);
}

  2. 믹스인(Mixins)
    재사용 가능한 스타일 블록을 정의할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

    @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin media-breakpoint($width) {
    @media screen and (min-width: $width) {
        @content;
    }
}

.card {
    @include flex-center;

    @include media-breakpoint(768px) {
        flex-direction: row;
    }
}

  3. 확장/상속
    기존 스타일을 다른 선택자에서 재사용할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    %button-base {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.button-primary {
    @extend %button-base;
    background-color: $primary-color;
    color: white;
}

.button-secondary {
    @extend %button-base;
    background-color: $secondary-color;
    color: black;
}

  4. 함수와 연산
    Sass는 다양한 내장 함수와 수학적 연산을 지원한다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    $base-size: 16px;

.container {
    // 수학적 연산
    padding: $base-size * 1.5;

    // 색상 함수 사용
    background-color: lighten($primary-color, 20%);
    border-color: darken($primary-color, 10%);

    // 사용자 정의 함수
    width: calculate-width(4);
}

@function calculate-width($columns) {
    @return $columns * 100px + ($columns - 1) * 20px;
}

실제 프로젝트에서의 활용

  1. 모듈화와 파일 구조
    Sass는 파일을 모듈화하여 관리할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

    // _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _mixins.scss
@mixin box-shadow($x, $y, $blur, $color) {
    box-shadow: $x $y $blur $color;
}

// main.scss
@import 'variables';
@import 'mixins';

.card {
    background: white;
    @include box-shadow(0, 2px, 5px, rgba(0,0,0,0.1));
}

  2. 반응형 디자인
    Sass를 사용하여 효율적인 반응형 디자인을 구현할 수 있다:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    $breakpoints: (
    small: 576px,
    medium: 768px,
    large: 992px,
    xlarge: 1200px
);

@mixin respond-to($breakpoint) {
    $size: map-get($breakpoints, $breakpoint);
    @media screen and (min-width: $size) {
        @content;
    }
}

.container {
    width: 100%;

    @include respond-to(medium) {
        width: 750px;
        margin: 0 auto;
    }

    @include respond-to(large) {
        width: 970px;
    }
}

Sass를 사용할 때의 모범 사례

  1. 변수와 믹스인의 체계적인 관리
    의미 있는 이름을 사용하고, 관련된 값들을 그룹화하여 관리한다. 이는 코드의 유지보수성을 크게 향상시킨다.

  2. 파일 구조의 체계화
    큰 프로젝트에서는 파일을 목적에 따라 분리하고, 명확한 import 순서를 유지하는 것이 중요하다.

  3. 중첩 규칙의 적절한 사용
    너무 깊은 중첩은 피하고, 가능한 3단계 이내로 유지하는 것이 좋다. 이는 CSS 출력을 깔끔하게 유지하는 데 도움이 된다.

참고 및 출처