프로그래밍/CSS

SASS: CSS 전처리기의 모든 것

shimdh 2025. 7. 1. 07:49
728x90

웹 개발에서 CSS는 필수적인 요소입니다. 그러나 대규모 프로젝트에서는 CSS의 복잡성이 증가하면서 유지보수와 관리가 어려워질 수 있습니다. 이러한 문제를 해결하기 위해 CSS 전처리기가 등장했습니다. 그 중에서도 SASS(구문적으로 멋진 스타일 시트)는 가장 인기 있는 전처리기 중 하나로, 개발자들에게 많은 혜택을 제공합니다. 이번 포스트에서는 SASS의 주요 기능과 이점을 살펴보겠습니다.

SASS의 주요 기능

1. 변수

SASS에서는 변수를 사용하여 색상, 글꼴 크기 등 다양한 CSS 값을 저장할 수 있습니다. 이를 통해 코드의 일관성을 유지하고, 나중에 값을 쉽게 변경할 수 있습니다.

$primary-color: #3498db;
$font-stack: 'Helvetica', sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

2. 중첩

SASS는 CSS 선택자를 HTML 구조와 동일한 계층 구조로 중첩할 수 있게 해줍니다. 이는 코드의 가독성을 높이고, 스타일을 더 직관적으로 관리할 수 있게 합니다.

.nav {
  ul {
    list-style-type: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        color: $primary-color;
      }
    }
  }
}
728x90

3. 믹스인

믹스인은 재사용 가능한 스타일 조각을 생성하여 코드 중복을 줄여줍니다. 다양한 선택자에 쉽게 적용할 수 있어 효율적인 스타일링이 가능합니다.

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius; // 구형 브라우저 지원
  -moz-border-radius: $radius;    // 구형 브라우저 지원
}

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

4. 부분 파일 및 가져오기

SASS는 스타일을 여러 파일로 나누고, 부분 파일을 사용하여 이를 하나의 주요 스타일 시트로 가져올 수 있습니다. 이는 코드의 조직을 개선하는 데 큰 도움이 됩니다.

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

// styles.scss
@import 'variables';

body {
  color: $primary-color;
}

5. 연산자

SASS는 수학적 연산을 지원하여 스타일 시트 내에서 직접 계산을 수행할 수 있습니다. 이를 통해 더 동적인 스타일링이 가능합니다.

.container {
  width: 100%;

  .column {
    width: 100% / 3; // 열 수에 따라 동적으로 너비 계산
    float: left; 
  } 
}

6. 함수

SASS에서는 사용자 정의 함수를 생성하여 입력 매개변수에 따라 값을 반환할 수 있습니다. 이를 통해 더욱 유연한 스타일링이 가능합니다.

7. 제어 지시문 및 표현식

SASS는 조건문(@if, @for, @each)을 통해 특정 조건에 따라 스타일을 적용할 수 있게 해줍니다. 이는 복잡한 스타일링 로직을 구현하는 데 유용합니다.

SASS 사용의 이점

  • 향상된 유지보수성: 중첩 및 부분 파일을 통해 코드가 잘 조직되어 있어 유지보수가 용이합니다.
  • 개선된 가독성: 구조화된 형식 덕분에 코드가 더 읽기 쉽고 이해하기 쉬워집니다.
  • DRY 원칙: 믹스인과 함수를 통해 코드의 재사용성을 높여 "중복을 피하라"는 원칙을 실천할 수 있습니다.

결론

SASS와 같은 전처리기를 사용하면 CSS 작성 방식이 혁신적으로 변화합니다. 스타일 시트의 명확성을 유지하면서도 생산성을 높이는 강력한 도구로 자리 잡고 있습니다. 웹 애플리케이션이 점점 더 복잡해짐에 따라, 전처리기를 채택하는 것은 대량의 스타일을 효율적으로 관리하는 데 필수적입니다. 위에서 소개한 기능들을 작업 흐름에 통합함으로써, 더 깔끔하고 효과적인 CSS를 작성할 수 있을 것입니다.

728x90