20分で習得！SCSS(Sass)の基礎や文法を開発ですぐに使える内容で徹底解説

みなさんこんにちは！エンジニアの高澤です！

今回は、SCSS(Sass)の基礎や文法を開発ですぐに使える内容で徹底解説底解説していきたいと思います。

SCSSとは、CSSをより便利に書けるように拡張したスタイルシート言語のことを言いますが、Web開発ではかなりメジャーで開発現場で使われている言語で、例えばWebサイト制作などでのWordPressのテーマ開発や、Webアプリなど、CSSを使う現場ではほぼほぼ導入されている言語になります。

内容として、20分でサクッと習得していただきすぐに現場で使える構成で執筆いたしましたので、よろしければご活用いただけましたら幸いです。

Sass(SCSS、SASS)とは

Sass（サス「サースとも呼ばれます」）とは、CSSを拡張して書きやすく、扱いやすくしたメタ言語のことを言います。

メタ言語とは、ある言語に別のルールを定義するために使われる言語のことで、拡張言語とも呼ばれます。Sassは、CSSをより効率的に記述するためのメタ言語として2006年に登場しました。

Sassの記述方法には、「SCSS」と「SASS」の2種類があります。

今回は、しばしば開発に使用される「SCSS」の文法について解説した内容になります。

SCSSとは

SCSS（エス・シー・エスエス）とは、CSSをより便利に書けるように拡張したスタイルシート言語のことを言います。

以下がSCSSの公式サイトになります。

https://sass-lang.com

CSSの書き方をより効率的にし、開発の手間を減らすための機能が多数備わっています。

例えば、変数・ネスト・ミックスイン・継承・関数・演算などの機能を使うことで、より簡潔でメンテナブルなコードを書くことが可能です。

通常のCSSでは同じ色やフォントサイズを何度も記述する必要がありますが、SCSSでは変数を使って一元管理できます。

$primary-color: #3498db;  
body {  
  background-color: $primary-color;  
}

また、CSSではセレクタを個別に記述する必要がありますが、SCSSではネストを活用することで、より直感的にスタイルを定義できます。

nav {  
  ul { list-style: none; }  
  li { display: inline-block; }  
}

さらに、SCSSではミックスインを使うことで、よく使うスタイルを簡単に再利用できます。

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

SCSSは通常のCSSと互換性があり、CSSファイルをそのままSCSSファイル（拡張子「.scss」）に変更しても問題なく動作します。これにより、CSSの知識があればすぐに導入でき、スタイルの保守性や再利用性が向上します。

つまり、SCSSファイルに通常のCSSコードを書いても問題なく動作するということです。

現在では多くのWeb開発の現場で利用されており、特に大規模なプロジェクトやチーム開発で強力なツールとして役立ちます。

ちなみにSCSSはWeb開発では非常に定番のツールで、例えば、WebサイトやWebアプリののフロントエンド開発などに使われていております。

SCSS Playground

SCSS Playgroundとは、SCSSをブラウザ上で手軽に試せるオンラインツールです。

SCSSのコードを入力すると、自動的にコンパイルされてCSSに変換され、結果をリアルタイムで確認できます。

https://sass-lang.com/playground

SCSS Playgroundは、筆者の経験上SCSSコードの記述の練習にも使えるし、実はお仕事での開発業務時にもコードの検証などで結構重宝するツールになりますので、知っておいて損がないかと思います。

ご自身でSCSSのコード記述の練習や、これから解説するサンプルコードの動作検証をしながら挙動を確かめつつ理解を深めることが可能ですので、積極的にお使いいただくことをおすすめします。

SCSSの文法

それではSCSSの文法について、解説いたします。

語弊を恐れずに言うと、SCSSはそもそもCSSの知識があり問題なく使える方であれば、文法さえ押さえれば実践ですぐに使えます。（SCSSは楽勝だと言いたいわけではありません）

と言うのもSCSSはCSSを拡張したものであるため、そもそもCSSコードをそのまま記述することができ、その記述したCSSを一部ちょっぴり書き方をアレンジするかのようなイメージで使うことが可能です。

そのため、ここでご紹介する文法は全てサクッと理解してしまいましょう。

おそらくすぐに使いこなせるようになるかと思います。

変数（Variables）

SCSSでは、変数（Variables）を使って色やフォントサイズなどのスタイル情報を一元管理できます。

SCSSの変数は、「$」を先頭に付けて定義し、「$primary-color: #3498db;」のように記述します。

変数を定義することで、コードの可読性や保守性が向上し、スタイルの変更も簡単に行えるようになります。
例えば、以下のように変数を定義することで、サイト全体のテーマカラーや基本的なフォントサイズを統一できます。

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color; 
  font-size: $font-size; 
}

このコードでは、$primary-colorに「#3498db（青色）」を、$font-sizeに「16px」を設定しています。

body要素のテキストカラーには$primary-color、フォントサイズには$font-sizeが適用され、変数を変更するだけでサイト全体のデザインを簡単に調整できます。

SCSSの変数を活用することで、スタイルの一貫性を保ちつつ、変更が必要な際には一箇所の修正で済むため、特に大規模なWebサイトやチーム開発において非常に有効な手法です。

ネスト（Nesting）

SSCSSでは、ネスト（Nesting）を使用することで、親セレクタの中に子セレクタを入れ子状に記述できます。これにより、CSSの構造をより直感的に表現でき、コードの可読性や管理のしやすさが向上します。

例えば、以下のコードでは、SCSSでは、nav内のulとliに対してスタイルを適用しており、親セレクタの中に子セレクタをネストしております。

nav {
  ul {
    list-style: none;
  }
  
  li {
    display: inline-block;
  }
}

SCSSのネストを使うことで、セレクタの関係が明確になり、コードの記述量も削減できます。

x特に、階層構造のあるナビゲーションやフォームデザインなどでは、ネストを活用することで管理しやすくなります。ただし、ネストを深くしすぎると可読性が低下するため、適切な階層構造を意識することが重要です。

ミックスイン（Mixins）

SCSSのミックスイン（Mixins）は、@mixinを使って再利用可能なスタイルを定義し、@includeを用いて適用できる機能です。

これにより、よく使うスタイルを簡単に呼び出せるようになり、コードの重複を減らし、保守性を向上させることができます。

例えば、以下のコードでは、中央配置のスタイルをミックスインとして定義しています。

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

.container {
  @include flex-center;
}

このように、@mixinを使って再利用可能なスタイルを作成できます。

この例では、@mixin flex-centerを定義し、.containerクラスに@include flex-centerを使って適用しています。通常のCSSでは同じスタイルを何度も記述する必要がありますが、ミックスインを使うことで一度の定義で複数の要素に適用でき、スタイルの統一も容易になります。

また、ミックスインは引数を持つこともでき、例えば@mixin border($size, $color) のようにパラメータを渡して動的なスタイルを作成することも可能です。SCSSのミックスインを活用することで、より柔軟で効率的なスタイル設計ができます。

ミックスイン（引数付きの動的なMixins）

SCSSのミックスイン（Mixins）は、引数を持たせることで動的なスタイルを作成できます。これにより、異なるサイズや色を簡単に適用でき、コードの再利用性がさらに向上します。

例えば、以下のコードでは、ボーダーのサイズと色を指定できるミックスインを作成しています。

@mixin border($size, $color) {
  border: $size solid $color;
}

.box-small {
  @include border(2px, red);
}

.box-large {
  @include border(5px, blue);
}

この例では、@mixin border($size, $color)を定義し、@include border(2px, red);や@include border(5px, blue);のように異なる値を渡して適用しています。

れにより、ボーダーの太さや色を柔軟に変更でき、同じスタイルのバリエーションを簡単に作成できます。

ミックスインにデフォルト値を設定することも可能で、例えば@mixin border($size: 1px, $color: black)のように定義すると、引数を省略した場合にデフォルトの値が適用されます。

このように引数付きのSCSSのミックスインを活用すれば、効率的でメンテナンスしやすいスタイル設計が可能になります

継承（Extend）

@extendを使って、クラスのスタイルを継承できます。

継承元としてプレースホルダー（「%」を冒頭につけたセレクタ）を使うと、不要なクラスが出力されませんのでプレースホルダーでの継承をご紹介いたします。

CSSの継承（Extend）を利用すると、@extendを使って既存のスタイルを再利用できます。
特に、プレースホルダーを活用することで、不要なクラスがCSSに出力されず、より最適化されたスタイルを作成できます。

例えば、以下のコードではボタンの基本スタイルを「%button-style」として定義し、successクラスと warningクラスがそれを継承しています。

%button-style {
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}

.success {
  @extend %button-style;
  background-color: green;
}

.warning {
  @extend %button-style;
  background-color: orange;
}

このように、プレースホルダーを使うことで、共通のスタイルを持つクラスを効率よく管理でき、CSSの冗長性を減らせます。

特に、ボタンやカードなどのデザインパターンを統一する際に便利です。

数値の演算（加算・減算・乗算・除算）

SSCSSでは、数値同士の加算（+）、減算（-）、乗算（*）、除算（/）が可能です。

$base-size: 10px;

.box {
  width: $base-size * 5; // 50px
  height: $base-size + 20px; // 30px
  margin: $base-size / 2; // 5px
}

上記のコードでは、$base-sizeを基準にサイズを計算しており、変更が必要になった場合も$base-size の値を変更するだけで済みます。

注意点として、「/（除算）」は、プロパティの値として直接記述すると「/」を区切りとして認識する場合があるため、括弧で囲むか変数に格納して使うのが安全です。

$full-width: 100%;
.half {
  width: ($full-width / 2); // 50% (括弧がないと無効になることがある)
}

色の演算

SCSSでは、色に対しても演算を適用できます。

SCSSには、色を調整するための組み込み関数が用意されています。例えば、明るくしたい場合はlighten()関数、暗くしたい場合はdarken()関数を使用します。

$base-color: #3498db;

.button {
  background-color: $base-color;
  border-color: lighten($base-color, 10%); // 10% 明るくする
}

上記コードでは、lighten($base-color, 10%)を使うことで、$base-colorを10%明るくした色がborder-colorに適用されます。

以下は、SCSSの色の組み込み関数を表にしたものです。

文字列の演算（結合）

文字列同士を「+」で結合することもできます。

$base-font: "Roboto";
$font-weight: "bold";

.text {
  font-family: $base-font + ", sans-serif"; // "Roboto, sans-serif"
  font-weight: $font-weight;
}

文字列の結合を使えば、フォントやURLの管理がより簡単になります。

条件分岐（@if）

SCSSでは、@ifと@else を使うことで、条件に応じて異なるスタイルを適用することができます。これは、特定の変数の値に応じて動的にスタイルを変更したい場合に非常に便利です。

基本的な使い方

例えば、以下のコードでは、$themeという変数の値に応じて bodyの背景色を変更しています。

$theme: dark;

body {
  @if $theme == dark {
    background-color: black;
  } @else {
    background-color: white;
  }
}

このコードでは、$themeの値がdarkの場合はbackground-color: black;が適用され、それ以外の値ならbackground-color: white;が適用されます。

複数の条件を使う場合

「@else if」を使えば、複数の条件を指定することも可能です。

$theme: blue;

body {
  @if $theme == dark {
    background-color: black;
  } @else if $theme == blue {
    background-color: blue;
  } @else {
    background-color: white;
  }
}

この例では、$themeの値がdarkの場合は黒、blueの場合は青、それ以外の値なら白が適用されます。

マップ

SCSSのマップ（map）は、キーと値のペアを持つデータ構造で、複数の関連する値を管理するのに便利です。マップを使用すると、スタイルのカスタマイズや管理がしやすくなります。

$theme-colors: (
  primary: blue,
  secondary: gray
);

body {
  background-color: map-get($theme-colors, primary);
}

上記コードは、$theme-colorsというマップを作成し、「primary: blue」、「secondary: gray」のようにキーと値のペアを定義できます。

マップの値を取得するには、map-get($map, $key)関数を使用します。

「map-get($theme-colors, primary)」を使用してprimaryに対応するblueを取得し、bodyのbackground-colorに適用しています。

これにより、変数のように値を一元管理しつつ、複数のスタイルに簡単に適用することが可能になります。マップを利用すると、テーマカラーやブレークポイントなどを整理し、柔軟なスタイル管理が実現できます。

リスト

SCSSのリスト（list）は、複数の値を1つの変数に格納できるデータ構造で、スタイルの一括管理やループ処理に便利です。

$colors: red, green, blue;

例えば、「$colors: red, green, blue;」と定義すると、「red、green、blue」の3つの値を持つリストとして扱うことができます。

リストの値を取得するには、nth($list, $index)関数を使用し、nth($colors, 1)とするとredが取得されます（SCSSのインデックスは1から始まります）。

$colors: red, green, blue;

.first-color {
  color: nth($colors, 1); // red
}

.second-color {
  color: nth($colors, 2); // green
}

.third-color {
  color: nth($colors, 3); // blue
}

nth($colors, 1) はリストの最初の要素を取得し、nth($colors, 2) で2番目、nth($colors, 3) で3番目の要素を取得します。

SCSSのリストはインデックスが「1から始まる」ため、最初の要素を取得する際はnth($colors, 1)と記述する点に注意が必要です。

また、@eachを使ってリスト内の値を順番に処理することも可能で、例えば「@each $color in $colors { .text-#{$color} { color: $color; } } 」と書くと、text-red、text-green、text-blue のクラスが自動生成され、それぞれのテキストに対応する色が適用されます。

$colors: red, green, blue;

@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

@eachを使うことで、リスト内の各値に対応するクラスを自動生成できます。この方法を活用すると、規則性のあるクラスを簡潔に記述でき、コードの可読性や保守性が向上します。

ループ（@for）

SCSSの@forは、指定した範囲内で繰り返し処理を行い、効率的にスタイルを適用するためのループ構文です。

以下のように基本的な構文として「@for $i from 1 through 5」のように記述し、変数「$i」を使ってクラス名やプロパティの値を動的に生成できます。

@for $i from 1 through 5 {
  .box-#{$i} {
    width: $i * 10px;
  }
}

上記コードは、「.box-#{$i}」のようにクラス名を設定し、「width: $i * 10px;」と記述すると、「.box-1」から「.box-5」までのクラスが自動で生成され、それぞれ幅が10pxずつ増加するスタイルになります。

なお、「through」を使うと指定した終了値を含み、「to」を使うと終了値の手前までが適用されます。これにより、規則的なスタイルを簡潔に定義でき、メンテナンス性の向上にも役立ちます。

ループ（@each）

SCSSの@eachは、リストやマップの各要素に対して繰り返し処理を行うためのループ構文です。

特に、複数の値を持つ変数を効率的に展開し、クラスやスタイルを自動生成するのに便利です。

$theme-colors: (
  primary: blue,
  secondary: gray,
  danger: red
);

@each $name, $color in $theme-colors {
  .btn-#{$name} {
    background-color: $color;
  }
}

上記コードは、$theme-colorsというマップを定義し、それを@eachで展開することで、各キーをクラス名に、各値をbackground-colorに適用できます。

@eachの処理では、$theme-colorsのマップとしてのデータ内容を、$nameと$colorにそれぞれ「$name」には「キー（例：primary）」、「$color」には「値（例：blue）」をマップとして定義しているデータの分だけ一行ずつ代入して繰り返しループして出力しています。

このように@eachを活用することで、スタイルの管理を簡潔にし、コードの可読性や保守性を向上させることができます。

ループ（@while）

SCSSの@whileは、指定した条件がtrueである間、繰り返し処理を実行するループ構文です。

$i: 1;

@while $i <= 5 {
  .circle-#{$i} {
    width: $i * 10px;
    height: $i * 10px;
  }
  $i: $i + 1;
}

上記コードは、$iを1から開始し、$i <= 5の条件が成り立つ間ループを実行する場合、.circle-#{$i}というクラスを動的に生成し、それぞれwidthとheightを$i * 10pxの大きさに設定できます。

ループの最後に$i: $i + 1;を記述することで、変数$iの値を1ずつ増加させ、無限ループを防ぎます。

このコードをコンパイルすると、.circle-1から.circle-5までのクラスが作成され、各クラスに異なるサイズが適用されます。

@whileは繰り返し回数が事前に決まっていない場合や、特定の条件に基づいてループを制御したい場合に有効です。

関数（Functions）

@functionを使って独自の計算ロジックを作成できます。

SCSSの@functionは、独自の関数を作成し、計算結果を返すために使用されます。

@functionを使うことで、繰り返し使用する計算処理を簡潔にまとめ、コードの再利用性を高めることができます。

@function double($value) {
  @return $value * 2;
}

.container {
  width: double(20px);
}

上記コードは、double($value)という関数を定義し、「@return $value * 2;」と記述することで、渡された値を2倍にして返すことができます。

この関数を使って、.containerのwidthをdouble(20px)と指定すると、結果として「width: 40px;」が適用されます。関数を使用すると、計算ロジックを統一できるため、メンテナンス性が向上し、スタイルの一貫性を保ちやすくなります。

インポートとモジュール管理

SCSSではスタイルを分割し、@useや@importで読み込めます。

SCSSでは、@useと@importを利用してスタイルを分割し、モジュールとして管理することができます。これにより、コードの再利用性が向上し、スタイルの管理がしやすくなります。

@use 'variables';
@import 'mixins';

現在は@useを使うことが推奨されており、@importは公式非推奨とされておりますので、理由がない限りは@useを使うようにしましょう。

@import

@importは、指定したSCSSファイルを現在のファイルに読み込むために使用されます。

例えば、「@import ‘mixins’;」と記述すると、mixins.scssの内容が読み込まれ、ミックスインを他のスタイルで利用できるようになります。

ただし、@importは複数回インポートされる可能性があり、CSSの冗長な出力を引き起こすことがあります。

例えば、サーバーの同じ階層に別ファイルで_mixins.scssが存在するとして…

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

_mixins.scssの内容をstyle.scssで読み込む場合は以下のようになります。

// style.scss
@import 'mixins';

.container {
  @include flex-center;
}

注意点としては、@importを複数回使用すると同じスタイルが重複して出力される可能性があります。また、グローバルスコープのため、mixins.scss内のすべての内容が直接読み込まれます。

@use

@useは@importの代わりとなる推奨の方法で、ファイルを一度だけ読み込み、スコープを制限することができます。

例えば、「@use ‘variables’;」と記述すると、variables.scssの内容がインポートされますが、変数や関数を使用する際には「variables.$color-primary」のようにプレフィックスを付ける必要があります。

例えば、サーバーの同じ階層に別ファイルで_variables.scssと…

// _variables.scss
$color-primary: blue;
$color-secondary: gray;

_mixins.scssが存在するとして…

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

_variables.scssと_mixins.scssの内容をstyle.scssで読み込む場合は以下のようになります。

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

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

@useではプレフィックス（variables. や mixins.）を付けることで、スコープを明確にし、変数やミックスインの競合を防ぐことができます。ファイルが一度だけ読み込まれるため、CSSの重複出力を防ぎ、パフォーマンスが向上します。

@useを活用することで、名前の競合を防ぎ、より構造的なスタイル管理が可能になります。

まとめ

今回は、SCSS（Sass）の基礎や文法について、開発ですぐに使える内容を徹底解説しました。

SCSSは、CSSをより便利に記述できるように拡張されたスタイルシート言語であり、Web開発において広く利用されています。特に、WordPressのテーマ開発やWebアプリケーションのスタイリングなど、CSSを使用する現場では欠かせない技術となっています。

当記事では、SCSSの基本を20分で習得し、すぐに実践で活用できるような構成で解説しました。ぜひ、日々の開発に役立てていただければ幸いです。