Sass(SCSS)에서 자주 쓰이는 추가 @ 지시자 5가지입니다.

 

아래는 Sass(SCSS)에서 자주 쓰이는 추가 @ 지시자 5가지입니다. 필요에 따라 조합해서 써보세요.

---

6. @function

• 의미: 재사용 가능한 사용자 정의 함수를 만들 때
• 사용법: @return으로 값 반환

// 함수 정의
@function rem($px) {
  @return $px / 16 * 1rem;
}

// 호출
.title {
  font-size: rem(24);  // → 1.5rem
}

---

7. @if / @else

• 의미: 조건문으로 분기 처리
• 사용법: @if, @else if, @else

$theme: dark;

.body {
  @if $theme == light {
    background: #fff;
    color: #333;
  } @else if $theme == dark {
    background: #333;
    color: #eee;
  } @else {
    background: #f5f5f5;
  }
}

---

8. @for

• 의미: 숫자 범위에 걸친 반복문
• 사용법: from…through (포함) 또는 to (미포함)

@for $i from 1 through 4 {
  .col-#{$i} {
    width: 100% / 4 * $i;
  }
}

---

9. @each

• 의미: 리스트나 맵 항목을 순회
• 사용법: @each $item in $list 또는 @each $key, $value in $map

$colors: (primary: #3498db, success: #2ecc71, danger: #e74c3c);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

---

10. @forward

• 의미: 모듈(파일)을 재내보내기. 다른 곳에서 한 번에 묶어 불러올 때
• 사용법: @use와 함께

// _base/_colors.scss
$black: #000;
$white: #fff;

// _base/_typography.scss
$font-stack: Helvetica, sans-serif;

// _base/index.scss
@forward 'colors';
@forward 'typography';

// styles.scss
@use 'base';  
body {
  color: base.$black;
  font-family: base.$font-stack;
}

---

이제 함수, 조건문, 반복문, 모듈 관리까지 Sass의 핵심 기능을 두루 활용할 수 있습니다.