CSS 중급 도구

CSS CSS 전처리기 (Sass/LESS)

CSS CSS 전처리기 (Sass/LESS) — 중급

CSS 전처리기 (Sass/LESS)

1. 도입 (왜 배워야 하는가)

CSS 전처리기는 웹 개발 시 효율성을 극대화하는 도구입니다. 실제로 Sass나 LESS와 같은 전처리기를 사용하면 코드의 가독성을 높이고, 중복을 줄이는 데 큰 도움이 됩니다. 예를 들어, 대규모 웹사이트에서는 CSS 파일이 수천 줄에 이를 수 있으며, 이때 전처리기를 사용하지 않으면 반복적인 스타일 정의로 인해 유지보수가 매우 어려워집니다. 전처리기를 사용하지 않는다면, 코드를 수정할 때마다 모든 관련 CSS를 찾아 수정해야 하므로 시간과 노력이 많이 소모될 수 있습니다.

2. 핵심 개념 설명

Sass와 LESS

Sass (Syntactically Awesome Style Sheets): CSS의 확장 언어로, 변수, 중첩, 믹스인 등을 지원해 코드의 재사용성을 높여줍니다.
LESS: Sass와 비슷하게 CSS를 확장하는 언어로, 변수와 믹스인 기능이 있습니다. LESS는 JavaScript로 작성된 컴파일러를 사용합니다.

용어	설명
변수	스타일 속성을 재사용할 수 있게 해주는 요소
믹스인	여러 CSS 선언을 그룹화하여 재사용할 수 있는 기능
중첩	CSS 선택자를 중첩하여 더 간결하게 작성할 수 있는 방법

3. 기본 코드 예제

Sass 코드 예제

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

.button {
  background-color: $primary-color; // 변수 사용
  color: white;
  
  &:hover { // 중첩 사용
    background-color: darken($primary-color, 10%); // 색상 함수 사용
  }
}

실행 결과:

.button {
  background-color: #3498db;
  color: white;
}
.button:hover {
  background-color: #2980b9; / darken 함수로 색상 조정 /
}

동작 설명:

- $primary-color라는 변수를 정의합니다. - .button 클래스에서 해당 변수를 사용하여 배경색을 지정합니다. - &:hover로 마우스 오버 시의 스타일을 중첩하여 정의합니다. - darken 함수로 색상을 어둡게 조정합니다.

LESS 코드 예제

@primary-color: #3498db; // 변수 정의

.button {
  background-color: @primary-color; // 변수 사용
  color: white;
  
  &:hover {
    background-color: darken(@primary-color, 10%); // 색상 함수 사용
  }
}

실행 결과:

.button {
  background-color: #3498db;
  color: white;
}
.button:hover {
  background-color: #2980b9; / darken 함수로 색상 조정 /
}

동작 설명:

- @primary-color라는 변수를 정의합니다. - .button 클래스에서 해당 변수를 사용하여 배경색을 지정합니다. - &:hover로 마우스 오버 시의 스타일을 중첩하여 정의합니다. - darken 함수로 색상을 어둡게 조정합니다.

4. 실전 활용 예제

1) 쇼핑몰의 장바구니 버튼

$button-color: #e74c3c;
$hover-color: darken($button-color, 10%);

.cart-button {
  background-color: $button-color;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    background-color: $hover-color;
  }
}

이 코드는 쇼핑몰에서 장바구니 버튼을 디자인할 때 사용할 수 있습니다. 버튼의 배경색을 변수로 관리하여 쉽게 변경할 수 있습니다.

2) 반응형 네비게이션 바

$nav-bg-color: #2c3e50;

.navbar {
  background-color: $nav-bg-color;
  display: flex;
  justify-content: space-around;

  a {
    color: white;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

반응형 네비게이션 바를 만들 때 유용합니다. 링크의 스타일을 중첩하여 관리함으로써 코드의 가독성을 높입니다.

5. 흔한 실수와 주의사항

실수 1: 변수 이름 오타

$primary-colour: #3498db; // 오타
.button {
  background-color: $primary-color; // 정의되지 않은 변수 사용
}

올바른 코드:

$primary-color: #3498db; // 올바른 변수 이름

실수 2: 중첩 깊이 과다

.navbar {
  .dropdown {
    .item {
      // 스타일 정의
    }
  }
}

중첩이 너무 깊어지면 CSS가 복잡해집니다.
올바른 코드:

.navbar {
  .dropdown {
    // 스타일 정의
  }
}

6. 정리

CSS 전처리기는 코드의 가독성과 재사용성을 높여줍니다.
Sass와 LESS는 변수, 믹스인, 중첩 등의 기능을 통해 복잡한 CSS를 간결하게 관리할 수 있습니다.
실무에서 자주 사용하는 패턴을 학습하여 효율적인 스타일링을 구현할 수 있습니다.

다음에 학습하면 좋은 주제

CSS 모듈
BEM 방법론
CSS Grid 및 Flexbox

학습