基本的なSass/SCSSについて

アジェンダ

基本的なSass/SCSSについて要点をまとめます。最近ではネイティブCSSの進化により、Sass/SCSS特有の機能がネイティブCSSでも利用できるようになっています。その点についても簡単に触れます。

Sassとは

Sass（Syntactically Awesome Style Sheets）は、CSSをより効率的に書くために設計された拡張可能なスタイルシート言語です。CSSはスタイルを指定するためのシンプルな言語ですが、大規模なプロジェクトや高度なデザインでは管理が難しくなることがあります。Sassは、CSSに加え、変数やネスト、ミックスイン、継承などの強力な機能を提供し、開発者がCSSをより柔軟かつ効率的に記述できるようにします。

Sassには2つの構文スタイルがあり、それが「Sass」と「SCSS」として知られています。これらは機能的には同じですが、構文の記述スタイルが異なります。

• Sass: インデントベースの構文で、波括弧やセミコロンが不要です。
• SCSS: CSSに似た構文で、波括弧 {} やセミコロン ; を使います。SCSSはCSSに互換性があり、既存のCSSコードをそのままSCSSに移行できるため、一般的に使用されています。

また、Sass/SCSSで記述したコードは、最終的にブラウザで認識されるCSSファイルに変換されなければなりません。この変換プロセスが「コンパイル」と呼ばれます。

SassとSCSSの違い

構文の違いだけで、機能自体は同じです。

Sassの構文

インデントベースの構文で、波括弧やセミコロンが不要。よりシンプルな書き方が可能です。

• 例:

  $primary-color: #333
  body
    color: $primary-color
  

SCSSの構文

CSSライクの構文で、波括弧 {} やセミコロン ; を使います。既存のCSSコードを簡単に移行できるため、より一般的に使用されます。

• 例:

  $primary-color: #333;
  body {
    color: $primary-color;
  }
  

Sass/SCSSの主な機能

変数

繰り返し使う値（色やフォントサイズなど）を変数として定義します。

$primary-color: #ff6347;
body {
  color: $primary-color;
}

ネスト

HTML構造に合わせた階層的なCSSを書くことができ、可読性が向上します。

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

ミックスイン

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

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
button {
  @include border-radius(10px);
}

継承

既存のスタイルを他のクラスに継承させます。

%message {
  padding: 10px;
  border: 1px solid #ccc;
}
.error {
  @extend %message;
  color: red;
}

Sass/SCSSの使い方

手順1. インストール

• npmを使ってSassをインストール:

  npm install -g sass
  

手順2. コンパイル

• Sass/SCSSファイルをCSSに変換するために、次のコマンドを実行します。

  sass input.scss output.css
  

• 自動で監視しコンパイルする場合:

  sass --watch input.scss:output.css
  

コンパイルのタイミング

Sass/SCSSのコンパイルは、ウェブサイト制作の際に、主に以下の2つのタイミングで行われます。

1. 開発時にリアルタイムでコンパイル

開発者がSass/SCSSファイルを編集するたびに、自動的にCSSファイルへコンパイルするよう設定できます。これを「リアルタイムコンパイル」や「ウォッチモード」と呼びます。

具体的には、次のようなツールや設定を使用して、Sass/SCSSが保存されるたびにCSSに変換されます。

• Sassのウォッチ機能:

  sass --watch input.scss:output.css
  

• ビルドツールやタスクランナー（例: Webpack や Gulp など）を使って自動コンパイル

  • WebpackやGulpにSassのコンパイルタスクを組み込んで、ファイルが変更されるたびにCSSに変換します。

この方法では、開発中にSass/SCSSを編集して保存すると、即座にCSSファイルに反映され、ブラウザで確認できるようになります。

2. デプロイ時にビルド（本番用)

本番環境にウェブサイトを公開する際には、Sass/SCSSは事前にCSSにコンパイルされた状態でサーバーにアップロードされます。
※このプロセスは「ビルド」や「デプロイ」と呼ばれることが多いです。

• ビルドプロセス: 開発が完了したら、最終的にSass/SCSSをCSSにコンパイルし、最適化（圧縮）して本番用のファイルを生成します。
  　例: WebpackやGulpのタスクで、CSSを圧縮して軽量化し、公開用に準備。

• 手動コンパイル: sass input.scss output.css --style compressed のようにして、最終的なCSSファイルを生成することもできます。

2024年のCSSとSass比較

2024年のCSSとSass/SCSSを比較すると、CSSが急速に進化し、以前はSass/SCSSでしかできなかった機能の多くがネイティブCSSでサポートされています。
以下は、Sass/SCSSからCSSに移行しても問題がないとされる機能と、まだSass/SCSSにしかない便利な機能をまとめます。

ネイティブCSSでサポートされるSass/SCSSの機能

• 変数: CSSではカスタムプロパティ（変数）が使用可能で、Sass/SCSSの変数と同様にテーマやスタイルの一貫性を保つために使用されます。カスタムプロパティはランタイムでも動的に変更可能で、Sass/SCSSの変数よりも柔軟に使えます。

  :root {
    --main-color: #3498db;
  }
  
  body {
    color: var(--main-color);
  }
  

• ネスト: CSSネストが2024年には主要なブラウザでサポートされるようになり、セレクタを入れ子にすることでスタイルの記述が簡素化されます。これにより、Sass/SCSSのセレクタネスト機能に匹敵する利便性がCSSにも提供されました。

  .parent {
    color: blue;
    & .child {
      color: red;
    }
  }
  

• 演算: CSSではcalc(), min(), max(), clamp()などの関数を使用して、数値の動的な計算が可能です。Sass/SCSSの四則演算に匹敵する機能が提供されています。

Sass/SCSSにしかない機能

• ミックスイン: Sass/SCSSのミックスインは、再利用可能なスタイルブロックを作成し、複数の場所で適用できる機能です。ネイティブCSSでは、ミックスインに対応する直接の機能はありませんが、CSSカスタムプロパティとJavaScriptを組み合わせて、類似の効果を実現できます。

  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .box {
    @include flex-center;
  }
  

• 関数の定義: Sass/SCSSでは独自の関数を作成して、スタイルを動的に制御することができます。これにより、複雑な計算や処理が可能になります。CSSには、関数の定義機能は存在しません。

詳しくは下記参照。

お役立ちサイト

css2sass

CSSをSassやSCSSに変換してくれます。

参考

• そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています | コリス
• 「モダンCSS」でCSSの書き方はどう変わる？ - itstaffing エンジニアスタイル
• SASS is dead? CSS vs SASS 2024. | Medium