【SASS】SASSとは？CSSを効率化するプリプロセッサの基本

SASSは、CSSを効率的に書くためのプリプロセッサです。変数やネスト、ミックスインなどの機能を使って、より保守性の高いスタイルシートを作成できます。

SASSとは

SASS（Syntactically Awesome Style Sheets）は、CSSを拡張したメタ言語です。SASSで書いたコードは、コンパイルして通常のCSSに変換されます。

SASSとSCSSの違い

構文	特徴
SASS	インデントベース、中括弧・セミコロン不要
SCSS	CSS互換、中括弧・セミコロンを使用

現在は SCSS が主流です。既存のCSSファイルをそのままSCSSとして使用できます。

主な機能

変数

色やサイズなどの値を変数として定義できます。

// 変数の定義
$primary-color: #3498db;
$font-size-base: 16px;
$spacing: 8px;

// 変数の使用
.button {
  background-color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing * 2;
}

ネスト

セレクタをネストして、階層構造を表現できます。

.nav {
  background: #333;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    color: white;
    text-decoration: none;

    &:hover {
      color: #3498db;
    }
  }
}

& は親セレクタを参照します。上記の &:hover は .nav a:hover にコンパイルされます。

ミックスイン

再利用可能なスタイルのブロックを定義できます。

// ミックスインの定義
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
}

// ミックスインの使用
.container {
  @include flex-center;
  height: 100vh;
}

.btn-primary {
  @include button-style(#3498db);
}

.btn-danger {
  @include button-style(#e74c3c);
}

継承（@extend）

他のセレクタのスタイルを継承できます。

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;
  background: #3498db;
  color: white;
}

.btn-secondary {
  @extend %button-base;
  background: #95a5a6;
  color: white;
}

% で始まるセレクタはプレースホルダーセレクタと呼ばれ、単体ではCSSに出力されません。

パーシャルとインポート

ファイルを分割して管理できます。

// _variables.scss（アンダースコアで始まるファイルはパーシャル）
$primary-color: #3498db;
$secondary-color: #2ecc71;

// _mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// main.scss
@use 'variables';
@use 'mixins';

.container {
  background: variables.$primary-color;
  @include mixins.flex-center;
}

演算

数値の計算ができます。

$base-size: 16px;

.container {
  width: 100% - 20px;
  padding: $base-size / 2;
  margin: $base-size * 2;
}

条件分岐とループ

// 条件分岐
@mixin theme($dark: false) {
  @if $dark {
    background: #333;
    color: white;
  } @else {
    background: white;
    color: #333;
  }
}

// ループ
@for $i from 1 through 5 {
  .mt-#{$i} {
    margin-top: $i * 8px;
  }
}

// 結果: .mt-1 { margin-top: 8px; } ... .mt-5 { margin-top: 40px; }

導入方法

npm でインストール

npm install -D sass

Vite / Astro での使用

Viteベースのプロジェクトでは、sassをインストールするだけで自動的にSCSSファイルを処理できます。

<style lang="scss">
  $primary: #3498db;

  .card {
    border: 1px solid $primary;

    &:hover {
      box-shadow: 0 4px 8px rgba($primary, 0.3);
    }
  }
</style>

参考文献

• Sass 公式ドキュメント
• Sass Guidelines

まとめ

SASSを使うことで、CSSの記述を効率化し、保守性を向上させることができます。特に大規模なプロジェクトでは、変数やミックスインによるスタイルの一元管理が重要です。SCSSはCSS互換なので、既存のプロジェクトにも導入しやすいのが特徴です。