더 심화된 Sass 지시자들

 

아래는 더 심화된 Sass 지시자들입니다. 간단한 예시와 함께 확인해 보세요.

---

1. @content

• 의미: 믹스인 내부에서 블록 형태의 스타일을 삽입할 때 사용

@mixin card($bg) {
  background: $bg;
  padding: 1rem;
  @content;  // 호출부에서 추가 스타일 삽입
}

.panel {
  @include card(#f5f5f5) {
    border: 1px solid #ccc;
  }
}

---

2. @while

• 의미: 조건이 참인 동안 반복 실행

$i: 1;
@while $i <= 3 {
  .item-#{$i} { width: 20% * $i; }
  $i: $i + 1;
}
/* .item-1, .item-2, .item-3 생성 */

---

3. @debug

• 의미: 컴파일 시 터미널에 변수나 표현식 값을 출력

$spacing: 8px * 2;
@debug $spacing;  // “8px * 2 = 16px” 출력

---

4. @warn

• 의미: 경고 메시지를 출력하되 컴파일은 계속

$ratio: 3;
@warn "권장 비율(2)이 아닙니다: #{$ratio}";

---

5. @error

• 의미: 오류 메시지를 출력하고 컴파일 중단

$columns: 0;
@if $columns < 1 {
  @error "columns 값은 1 이상이어야 합니다.";  
}

---

6. @at-root

• 의미: 네스트된 규칙을 최상위(level)로 꺼낼 때 사용

.nav {
  ul {
    @at-root .menu & {
      margin: 0;   // 결과: .menu .nav ul { margin:0; }
    }
  }
}

---

이제 @content, 반복·제어문, 디버그·알림 지시자, 네스트 제어까지 모두 활용해 보세요!