Sass

Sass(Syntactically Awesome Stylesheets)는 CSS를 더 강력하고 효율적으로 작성할 수 있도록 도와주는 CSS 전처리기(Preprocessor)입니다.
Sass는 CSS보다 더 유지보수하기 쉽고, 재사용성이 높으며, 강력한 기능을 제공하여 대규모 프로젝트에서 널리 사용됩니다.

Sass vs SCSS 차이

구분	Sass	SCSS
문법	들여쓰기 기반	중괄호 {}와 세미콜론 ; 사용
사용 방식	간결함	기존 CSS와 호환
확장자	.sass	.scss
특징	{}와 ; 없이 코드 작성	기존 CSS와 동일한 문법 사용

//Sass 문법 (들여쓰기 기반)
$main-color: #3498db

.button
  background-color: $main-color
  font-size: 16px

//SCSS 문법 (CSS와 유사)
$main-color: #3498db;

.button {
  background-color: $main-color;
  font-size: 16px;
}

• SCSS가 기존 CSS와 문법이 거의 동일하여 사용성이 더 편리

  1. 선택자 중첩 기능 (Nesting)

  Sass에서는 CSS 선택자를 중첩(Nesting) 하여 더 깔끔하게 작성할 수 있습니다.

.nav {
  background: #ddd;
  
  .nav-item {
    color: #333;

    &:hover {
      color: red;
    }
  }
}

• .nav-item은 .nav 내부에서만 사용됨
• &는 부모 선택자를 참조 (ex: .nav-item:hover)

컴파일 후 결과 (CSS)

.nav {
  background: #ddd;
}

.nav .nav-item {
  color: #333;
}

.nav .nav-item:hover {
  color: red;
}

2. 중첩 프로퍼티 (Nested Properties)

동일한 네임스페이스를 가지는 속성은 중첩 가능

.button {
  font: {
    size: 16px;
    weight: bold;
  }

  border: {
    width: 1px;
    style: solid;
    color: black;
  }
}

컴파일 후 결과 (CSS)

.button {
  font-size: 16px;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

3. 변수 사용 ($)

Sass의 변수는 모든 브라우저에서 사용 가능

$main-color: #3498db;
$padding: 10px;

.button {
  background-color: $main-color;
  padding: $padding;
}

4. 변수 리스트와 맵

리스트 사용

$colors: red, blue, green;

.button {
  background-color: nth($colors, 2); // blue
}

맵 (키-값 저장)

$theme-colors: (
  primary: #3498db,
  secondary: #2ecc71
);

.button {
  background-color: map-get($theme-colors, primary); // #3498db
}

5. 내장 함수

기능	함수	예제
색상	변경	lighten(), darken() lighten(#3498db, 20%)
리스트 관련	nth(), length()	nth($colors, 2)
문자열 조작	to-upper-case(), to-lower-case()	to-upper-case("hello")

6. 사칙연산

Sass는 CSS에서 지원하지 않는 *수학 연산(+, -, , /, %) 을 지원

.container {
  width: 100px + 50px;  // 150px
  height: 100px / 2;     // 50px
}

7. 파일 분할 및 다중 임포트 (@import / @use)

큰 프로젝트에서 여러 개의 Sass 파일을 나누어 관리 가능

• @import는 여러 번 임포트될 수 있음
• @use는 한 번만 임포트되며, 네임스페이스를 가짐

_variables.scss

$primary-color: #3498db;

main.scss

@use 'variables';

.button {
  background-color: variables.$primary-color;
}

• @use는 파일명을 variables로 참조하여 네임스페이스 관리

8. 미디어쿼리 중첩 가능 (@media)

Sass에서는 미디어 쿼리를 선택자 내부에서 사용할 수 있습니다.

.button {
  font-size: 16px;

  @media (max-width: 600px) {
    font-size: 14px;
  }
}

9. 상속 (@extend)

공통 스타일을 다른 클래스에서 재사용할 때 사용

.button {
  padding: 10px;
  border-radius: 5px;
}

.primary-button {
  @extend .button;
  background-color: blue;
}

컴파일 후 결과 (CSS)

.button, .primary-button {
  padding: 10px;
  border-radius: 5px;
}

.primary-button {
  background-color: blue;
}

10. 믹스인 (@mixin & @include & @content)

반복되는 스타일을 함수처럼 정의하여 재사용 가능

@mixin button-style($color) {
  background-color: $color;
  padding: 10px;
  border-radius: 5px;
}

.button {
  @include button-style(blue);
}

//@content 사용 예제
@mixin card {
  border: 1px solid #ddd;
  padding: 10px;

  @content;
}
.card {
  @include card {
    background-color: #f8f8f8;
  }
}

11. & 연산자

부모 선택자를 참조할 때 사용

.button {
  &:hover {
    background: red;
  }
}

컴파일 후 결과 (CSS)

.button:hover {
  background: red;
}