初心者必見！SASS入門で基礎を完璧にマスター！？

2024-07-272024-07-28

SASSはCSSをより効率的に書くための拡張機能で、開発者にとって非常に強力なツールです。

本記事では、SASSの基礎から使い方、そしてSCSS記法について詳しく解説します。

これを読めば、SASSの基本的な使い方をマスターできます！

SASSとは？

SASS（Syntactically Awesome Style Sheets）は、CSSをより簡単に、そして効率的に記述するためのCSS拡張言語です。
SASSにはインデントベースのSASS記法と、CSSに似たSCSS記法の2種類があります。

SCSS記法とは？

サンプルコード

SCSS（Sassy CSS）は、CSSに非常に似ているため、CSSからの移行が簡単です。
従来のCSSファイルと同じように書けるので、既存のCSSコードをSCSSファイルにコピーしても動作します。

// 変数の定義
$primary-color: #3498db;

// 入れ子構造（ネスト）
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: $primary-color;
  }
}

変数の使い方

サンプルコード

SASSの変数を使うことで、同じ値を何度も繰り返し使う必要がなくなり、メンテナンスが容易になります。
例えば、サイト全体のテーマカラーを一箇所で管理することができます。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

ユースケース

テーマカラーやフォントスタックなど、サイト全体で一貫性を持たせたいスタイルを管理する際に有効です。
大規模なプロジェクトでは、デザインの変更があった場合でも、変数を変更するだけで全体に反映させることができます。

ネストの活用

サンプルコード

SASSのネスト機能を利用すると、CSSの階層構造をより直感的に書くことができます。
これにより、親子関係のあるスタイルを視覚的にわかりやすく記述できます。

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

  li { display: inline-block; }

  a {
    text-decoration: none;
    color: $primary-color;

    &:hover {
      color: darken($primary-color, 10%);
    }
  }
}

ユースケース

コンポーネントベースの開発において、特定のコンポーネント内のスタイルをコンパクトにまとめるのに適しています。
ReactやVue.jsなどのフロントエンドフレームワークと組み合わせると効果的です。

ミックスインの導入

サンプルコード

ミックスインを使うことで、複数のセレクタで共通のスタイルを簡単に適用することができます。
これにより、コードの重複を避けることができます。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

ユースケース

複数の要素に同じスタイルを適用する場合、ミックスインを利用するとコードがすっきりします。
例えば、ボタンやカードコンポーネントの共通スタイルを管理するのに役立ちます。

継承のメリット

サンプルコード

SASSの継承機能を使うことで、既存のスタイルを他のセレクタに簡単に引き継ぐことができます。
これにより、スタイルの一貫性を保ちながら、コードの重複を減らすことができます。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }
.alert { @extend %message-shared; }
.success { @extend %message-shared; }

ユースケース

メッセージボックスやアラートなど、共通のスタイルを持つ要素に対して使用します。
デザインの変更があった場合でも、ベースとなるスタイルを変更するだけで済みます。

関数の利用

サンプルコード

SASSでは、独自の関数を作成して複雑な計算や処理を簡単に行うことができます。
これにより、動的なスタイルの生成が可能になります。

@function calculate-rem($size-px) {
  $base-font-size: 16px;
  @return $size-px / $base-font-size * 1rem;
}

.element {
  font-size: calculate-rem(24px);
}

ユースケース

レスポンシブデザインにおいて、ピクセルベースのサイズをREMに変換する際に便利です。
特に、複数の異なるサイズが必要な場合に役立ちます。

仕事でのユースケース紹介

大規模なプロジェクト

SASSは特に大規模なプロジェクトで有効です。
変数やミックスイン、ネストを活用することで、スタイルシートをモジュール化し、保守性を高めることができます。

// グローバルな変数定義
$primary-color: #3498db;
$secondary-color: #2ecc71;

// 各モジュールごとのスタイル
header {
  background-color: $primary-color;
  color: #fff;
}

footer {
  background-color: $secondary-color;
  color: #fff;
}

コンポーネントベースの開発

ReactやVue.jsなどのコンポーネントベースのフレームワークと組み合わせることで、各コンポーネントごとにスタイルを分けて管理できます。

// Buttonコンポーネント用のスタイル
@mixin button-styles($color) {
  background-color: $color;
  border: none;
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary {
  @include button-styles($primary-color);
}

.button-secondary {
  @include button-styles($secondary-color);
}

デザインシステムの構築

デザインシステムを構築する際に、SASSの変数やミックスインを使って、一貫性のあるスタイルを実現できます。

// 色の変数
$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-accent: #e74c3c;

// タイポグラフィのミックスイン
@mixin typography($font-size, $font-weight) {
  font-size: $font-size;
  font-weight: $font-weight;
}

// ヘッダー、ボディ、フッターに適用
header {
  @include typography(24px, bold);
  color: $color-primary;
}

body {
  @include typography(16px, normal);
  color: $color-secondary;
}

footer {
  @include typography(14px, normal);
  color: $color-accent;
}

レスポンシブデザインの実装

SASSを使うと、レスポンシブデザインも簡単に実装できます。
メディアクエリをネストして書けるため、コードがよりシンプルになります。

// レスポンシブミックスイン
@mixin respond-to($media) {
  @if $media == 'phone' {
    @media (max-width: 600px) { @content; }
  }
  @else if $media == 'tablet' {
    @media (max-width: 768px) { @content; }
  }
}

.container {
  width: 100%;
  padding: 20px;

  @include respond-to('tablet') {
    padding: 10px;
  }

  @include respond-to('phone') {
    padding: 5px;
  }
}

ベンダープレフィックスの簡略化

SASSのミックスインを使うことで、ベンダープレフィックスを簡単に管理できます。
これにより、ブラウザ互換性を保ちながら、記述量を減らすことができます。

// ベンダープレフィックスのミックスイン
@mixin flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

まとめ

SASSは、CSSをよりパワフルで効率的にするためのツールです。
変数、ネスト、ミックスイン、継承、関数などの機能を活用することで、コーディングの時間を大幅に短縮し、保守性を向上させることができます。

変数の利用メリット: 変数を使うことで、サイト全体のテーマカラーやフォントスタックを一箇所で管理できます。
これにより、デザインの一貫性が保たれ、メンテナンスが容易になります。
特に大規模なプロジェクトで、デザインの変更が発生した際には非常に有効です。
ネストによる構造化: ネスト機能は、親子関係のあるスタイルを視覚的にわかりやすく記述できるため、コードの可読性が向上します。
これにより、コンポーネントベースの開発が効率化され、フロントエンドフレームワークと組み合わせるとさらに効果的です。
ミックスインと継承の活用: ミックスインと継承は、共通のスタイルを複数のセレクタに適用する際に非常に便利です。
コードの重複を避け、スタイルの一貫性を保つことができます。
特に、ボタンやメッセージボックスなど、共通のデザインパターンが多いプロジェクトでは効果的です。
関数の導入: 独自の関数を作成することで、動的なスタイルの生成が可能になります。
レスポンシブデザインにおいて、ピクセルベースのサイズをREMに変換する際に非常に便利です。
これにより、複数の異なるサイズが必要な場合でも、効率的に管理できます。