icon안동민 개발노트

CSS 전처리기 (Sass) 입문

 CSS 전처리기는 CSS를 프로그래밍적으로 작성할 수 있게 해주는 도구입니다.

 이 절에서는 가장 인기 있는 CSS 전처리기 중 하나인 Sass(Syntactically Awesome Style Sheets)에 대해 알아보겠습니다.

CSS 전처리기의 개념과 필요성

 CSS 전처리기는 CSS를 생성하는 스크립팅 언어입니다.

 기존 CSS의 한계를 극복하고 더 효율적인 스타일 작성을 가능하게 합니다.

 주요 이점

  1. 코드 재사용성 증가
  2. 유지보수 용이성 향상
  3. 복잡한 스타일 로직 구현 가능
  4. 일관된 스타일 유지 용이

Sass 문법 : SCSS vs Sass

 Sass는 두 가지 문법을 지원합니다.

  1. SCSS (Sassy CSS) : CSS와 완전히 호환되는 문법
  2. Sass : 들여쓰기 기반의 간결한 문법

 SCSS가 더 널리 사용되므로, 이 절에서는 SCSS를 중심으로 설명하겠습니다.

Sass의 주요 기능

 1. 변수

  • 변수를 사용하여 값을 저장하고 재사용할 수 있습니다.
$primary-color: #3498db;
 
body {
  color: $primary-color;
}

 2. 중첩

  • 선택자를 중첩하여 구조를 더 명확하게 표현할 수 있습니다.
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 3. 믹스인 (Mixins)

  • 재사용 가능한 스타일 블록을 정의할 수 있습니다.
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}
 
.box { @include border-radius(10px); }

 4. 확장/상속

  • 기존 스타일을 다른 선택자에 상속할 수 있습니다.
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success {
  @extend %message-shared;
  border-color: green;
}
 
.error {
  @extend %message-shared;
  border-color: red;
}

 5. 연산자

  • 수학 연산을 직접 수행할 수 있습니다.
.container {
  width: 100%;
}
 
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

 6. 조건문

  • 조건에 따라 다른 스타일을 적용할 수 있습니다.
$theme: light;
 
body {
  @if $theme == dark {
    background-color: black;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

 7. 반복문

  • 반복적인 스타일을 자동으로 생성할 수 있습니다.
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

Sass 모듈 시스템

 Sass는 @use와 @forward 규칙을 통해 모듈 시스템을 지원합니다.

// _colors.scss
$primary: #3498db;
$secondary: #2ecc71;
 
// main.scss
@use 'colors';
 
body {
  color: colors.$primary;
}

파일 분할 전략

 대규모 프로젝트에서는 Sass 파일을 논리적으로 분할하여 관리합니다.

styles/
|-- base/
|   |-- _reset.scss
|   |-- _typography.scss
|-- components/
|   |-- _buttons.scss
|   |-- _navigation.scss
|-- layout/
|   |-- _grid.scss
|   |-- _header.scss
|-- pages/
|   |-- _home.scss
|   |-- _contact.scss
|-- main.scss

 main.scss에서 모든 파일을 import합니다.

@use 'base/reset';
@use 'base/typography';
@use 'components/buttons';
@use 'components/navigation';
// ...

Sass 사용 시 주의점

  1. 과도한 중첩 피하기
  2. 믹스인 남용 주의 (CSS 크기 증가)
  3. 확장 사용 시 주의 (예상치 못한 선택자 생성 가능)
  4. 변수 이름의 명확성 유지

컴파일된 CSS 최적화

  1. 압축(Minify) 옵션 사용
  2. 소스맵 생성으로 디버깅 용이성 확보
  3. 불필요한 중복 제거

Sass 프로젝트 도입 및 워크플로우 통합

  1. Node.js 설치 : Sass 컴파일러 실행을 위해 필요
  2. 프로젝트에 Sass 설치
npm install sass --save-dev
  1. 컴파일 스크립트 설정 (package.json)
"scripts": {
  "sass": "sass src/scss:dist/css --watch"
}
  1. 빌드 도구 통합 : Webpack, Gulp 등과 통합하여 자동화된 빌드 프로세스 구축
  2. 버전 관리 : 소스 Sass 파일만 버전 관리, 컴파일된 CSS는 제외
  3. 팀 가이드라인 설정 : 네이밍 규칙, 파일 구조, 코드 스타일 등 정의

실제 적용 예시

 복잡한 버튼 스타일을 Sass로 구현

$primary-color: #3498db;
$secondary-color: #2ecc71;
 
@mixin button-style($color) {
  background-color: $color;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($color, 10%);
  }
}
 
.button {
  &--primary {
    @include button-style($primary-color);
  }
 
  &--secondary {
    @include button-style($secondary-color);
  }
 
  &--large {
    font-size: 1.2em;
    padding: 15px 20px;
  }
}

 이 코드는 다양한 Sass 기능을 활용하여 유지보수가 용이하고 확장 가능한 버튼 스타일을 정의합니다.

 Sass는 CSS 작성을 더 효율적이고 강력하게 만들어줍니다. 변수, 중첩, 믹스인 등의 기능을 통해 코드 재사용성을 높이고 유지보수를 용이하게 합니다. 모듈 시스템과 파일 분할 전략을 활용하면 대규모 프로젝트에서도 CSS를 체계적으로 관리할 수 있습니다.

 Sass를 도입할 때는 팀의 역량과 프로젝트의 규모를 고려해야 합니다. 작은 프로젝트에서는 과도한 복잡성을 피하고, 대규모 프로젝트에서는 체계적인 구조와 가이드라인을 설정하는 것이 중요합니다.

 또한, Sass는 지속적으로 발전하고 있으므로, 최신 기능과 모범 사례를 계속 학습하고 적용하는 것이 좋습니다. 예를 들어, 최근에는 CSS 변수(커스텀 프로퍼티)와 Sass를 함께 사용하여 더 유연한 스타일링을 구현하는 방법이 인기를 얻고 있습니다.

 마지막으로, Sass를 사용하더라도 최종적으로 생성되는 CSS의 품질과 성능을 항상 고려해야 합니다. 불필요하게 복잡하거나 큰 CSS 파일이 생성되지 않도록 주의하고, 정기적으로 출력된 CSS를 검토하여 최적화할 부분을 찾는 것이 중요합니다.

이전으로다음으로