Sass (SCSS) 치트시트 (CSS 전처리기)

Sass는 변수, 중첩(Nesting), 믹스인 및 모듈식 임포트 기능으로 CSS를 강력하게 확장하는 성숙하고 안정적인 CSS 전처리기입니다.

변수 및 중첩 규칙 (Variables & Nesting)

$primary-color: #2563eb;
$border-radius: 8px;

.card {
  background: #ffffff;
  border-radius: $border-radius;

  .title {
    color: $primary-color;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  &__header {
    padding: 16px;
  }
}

---

믹스인 및 함수 (Mixins & Functions)

// Define reusable mixin with default arguments
@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center(column);
  height: 400px;
}

// Functions & Calculations
@use 'sass:math';

@function rem($pixels) {
  @return math.div($pixels, 16px) * 1rem;
}

.heading {
  font-size: rem(32px); // => 2rem
}

---

모던 모듈 시스템 (@use 및 @forward)

// _variables.scss
$theme-accent: #10b981;

// main.scss
@use 'variables' as vars;

.button {
  background-color: vars.$theme-accent;
}

---

관련 치트시트

• Stylus
• Less