Sass (SCSS) チートシート（CSS プリプロセッサ）

Sass は、変数、ネスト、Mixin、モジュールシステムなどの機能で標準 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;
  }
}

---

Mixin と関数（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