9장: CSS 전처리기

CSS 전처리기는 CSS 코드를 더 효율적이고 유지 보수하기 쉽게 작성할 수 있도록 도와주는 도구입니다. 전처리기를 사용하면 변수, 중첩, 믹스인, 상속 등의 기능을 활용할 수 있습니다. 이 장에서는 주요 CSS 전처리기인 Sass와 Less를 소개합니다.

### 9.1 전처리기 소개

CSS 전처리기는 CSS를 확장하여 변수, 논리적 연산, 함수 등의 프로그래밍 기능을 사용할 수 있게 합니다. 전처리기 코드는 브라우저에서 직접 해석되지 않으며, 최종적으로 표준 CSS로 컴파일되어 브라우저에서 사용됩니다.

### 9.2 Sass 기초

Sass(Syntactically Awesome Stylesheets)는 가장 널리 사용되는 CSS 전처리기 중 하나로, SCSS(Sassy CSS)와 Sass 두 가지 구문을 지원합니다. SCSS는 CSS와 호환되는 구문을 사용하며, Sass는 더 간결한 구문을 사용합니다.

#### 9.2.1 설치 및 설정

Sass를 사용하기 위해서는 먼저 Sass를 설치해야 합니다. Node.js가 설치되어 있다면 npm을 사용하여 설치할 수 있습니다.

명령어:(명령 프롬프트에서 실행하세요)
npm install -g sass

#### 9.2.2 변수 (Variables)

Sass에서는 변수를 사용하여 값(색상, 크기 등)을 저장하고 재사용할 수 있습니다.

SCSS 코드:
$primary-color: #3498db;
$font-size: 16px;

body {
    font-size: $font-size;
    color: $primary-color;
}

#### 9.2.3 중첩 (Nesting)

Sass는 CSS 선택자를 중첩하여 더 간결하게 작성할 수 있게 합니다.

SCSS 코드:
nav {
    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        margin-right: 10px;
    }

    a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
            color: darken($primary-color, 10%);
        }
    }
}

#### 9.2.4 믹스인 (Mixins)

믹스인은 재사용 가능한 스타일 블록을 정의하고 호출할 수 있게 합니다.

SCSS 코드:
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
    background-color: $primary-color;
    padding: 20px;
}

#### 9.2.5 상속 (Inheritance)

Sass는 상속을 사용하여 한 선택자의 스타일을 다른 선택자가 상속받을 수 있게 합니다.

SCSS 코드:
%message {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.success {
    @extend %message;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.error {
    @extend %message;
    background-color: #f2dede;
    border-color: #ebccd1;
}

### 9.3 Less 기초

Less는 또 다른 인기 있는 CSS 전처리기로, Sass와 유사한 기능을 제공합니다.

#### 9.3.1 설치 및 설정

Less를 사용하기 위해서는 먼저 Less를 설치해야 합니다. Node.js가 설치되어 있다면 npm을 사용하여 설치할 수 있습니다.

명령어(명령 프롬프트에서 실행하세요)
npm install -g less

#### 9.3.2 변수 (Variables)

Less에서는 변수를 사용하여 값(색상, 크기 등)을 저장하고 재사용할 수 있습니다.

Less 코드:
@primary-color: #3498db;
@font-size: 16px;

body {
    font-size: @font-size;
    color: @primary-color;
}

#### 9.3.3 중첩 (Nesting)

Less는 CSS 선택자를 중첩하여 더 간결하게 작성할 수 있게 합니다.

Less 코드:
nav {
    ul {
        list-style: none;
    }

    li {
        display: inline-block;
        margin-right: 10px;
    }

    a {
        text-decoration: none;
        color: @primary-color;

        &:hover {
            color: darken(@primary-color, 10%);
        }
    }
}

#### 9.3.4 믹스인 (Mixins)

믹스인은 재사용 가능한 스타일 블록을 정의하고 호출할 수 있게 합니다.

Less 코드:
.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.box {
    .border-radius(10px);
    background-color: @primary-color;
    padding: 20px;
}

#### 9.3.5 상속 (Inheritance)

Less는 상속을 사용하여 한 선택자의 스타일을 다른 선택자가 상속받을 수 있게 합니다.

Less 코드:
.message {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.success {
    .message;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.error {
    .message;
    background-color: #f2dede;
    border-color: #ebccd1;
}

### 연습 문제

1. Sass를 설치하고, 변수를 사용하여 색상과 글꼴 크기를 정의한 후, 이를 활용하여 스타일을 적용해 보세요.
2. Sass의 중첩 기능을 사용하여 네비게이션 바의 스타일을 정의해 보세요.
3. Sass 믹스인을 작성하여 여러 요소에 공통된 스타일을 적용해 보세요.
4. Less를 설치하고, 변수를 사용하여 색상과 글꼴 크기를 정의한 후, 이를 활용하여 스타일을 적용해 보세요.
5. Less의 중첩 기능을 사용하여 네비게이션 바의 스타일을 정의해 보세요.
6. Less 믹스인을 작성하여 여러 요소에 공통된 스타일을 적용해 보세요.