SCSSとは？独特の文法とそのメリット・デメリットを徹底解説

今日のWeb開発界隈では、様々な新しいテクノロジーやツールが日々登場しています。

その中でも特に注目を浴びているのが、CSSプリプロセッサーと呼ばれるもので、その中でもSCSSは非常に人気があり、多くの開発者に利用されています。

SCSSとはCSSの上位互換で、開発効率を何倍にも上げてくれるものです。

すーさん

本記事では、SCSSの基本的な概要、そのメリット・デメリット、主な文法、そして使い方について詳しく解説していきます。

おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説しているので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選

SCSSとは

SCSS（Sassy CSS）は、CSSのスーパーセット（CSSの機能を含みながらも新たな機能を加えたもの）で、CSSにはない機能を追加することで、より効率的にスタイリングを行うことができます。これらの機能には、変数、ネスト、ミックスイン、継承などが含まれています。

SCSSの背後には、開発者がCSSをより効率的に記述できるようにするという主旨があります。これにより、開発者はDRY（Don’t Repeat Yourself）の原則に従ってコードを書くことができます。つまり、同じコードを何度も書く代わりに、変数やミックスインを使って一度書いたコードを再利用しようということです。

1$primary-color: #ff6f69;
2
3body {
4  background-color: $primary-color;
5}
6
7button {
8  color: $primary-color;
9}

すーさん

変数($primary-color)を一度定義するだけで何度でも再利用が可能！

SCSSは、CSSと完全に互換性があるため、既存のCSSコードをそのままSCSSファイルに貼り付けて、新しい機能を少しずつ追加することが可能です。これにより、開発者は徐々に新機能を採用していき、すぐに大規模な書き換えをする必要がありません。

1nav {
2  ul {
3    margin: 0;
4    padding: 0;
5    list-style: none;
6
7    li {
8      display: inline-block;
9    }
10  }
11}
12
13nav a {
14    text-decoration: none;
15 }

すーさん

SCSSはCSSと互換性があるため、上記のように書くことも可能！

さらに、SCSSはCSSと同じくカーリーブレース（{}）とセミコロン（;）の使用を必要とするため、既にCSSに慣れている開発者は、SCSSの文法を習得するのが比較的容易であると言えます。

ただし、SCSSはブラウザが直接解釈できる形式ではないため、ブラウザが解釈できるCSSに変換（コンパイル）する必要があります。そのため、開発環境にSCSSをコンパイルするツールをセットアップする必要があります。幸い、多くのコンパイラ（Dart Sass、Node Sassなど）が利用可能であり、CLI（コマンドラインインターフェース）ツールや統合開発環境（IDE）のプラグインとして使用できます。

CSSとSCSSの違いに関してより詳しく知りたい方は初心者でも分かる！CSSとSCSSの比較ガイド。メリット・デメリットもで詳しく解説していますので、ぜひチェックしてみてください。

あわせて読みたい

初心者でも分かる！CSSとSCSSの比較ガイド。メリット・デメリットも

SCSSとSASSの違い

SCSSと同じくSASSというCSSのプリプロセッサーがあります。これは基本概念はSCSSと同じですが、文法や書き方が異なってきます。

SCSSとSASSの違いに関しては【完全初心者向け】SCSSとSASS:詳細比較と使い分けガイドで詳しく解説していますので、ぜひチェックしてみてください。

あわせて読みたい

【完全初心者向け】SCSSとSASS:詳細比較と使い分けガイド

SCSSのメリット・デメリット

以下、SCSSのメリットとデメリットです。

SCSSのメリット

保守性と可読性の向上

SCSSでは、ネストや変数、ミックスインなどの機能を使って、CSSよりも構造化されたスタイルシートを作成することができます。これにより、コードの可読性と保守性が向上します。

コードの再利用

SCSSでは、ミックスインや変数を使って、一度定義したスタイルルールを簡単に再利用することができます。これにより、コードの重複を避けることができます。

大規模なプロジェクトでのスケーラビリティ

SCSSは、@importや@useディレクティブを使って、スタイルシートを複数のファイルに分割することができます。これにより、大規模なプロジェクトでもスタイルシートの管理が簡単になります。

演算機能

SCSSには、色や数値の演算機能があります。これにより、色の調整やレイアウトのサイズ調整をコード上で行うことができます。

完全なCSS互換性

SCSSはCSSのスーパーセット(進化版)であるため、既存のCSSコードはそのままSCSSとして動作します。これにより、徐々にSCSSの新しい機能を導入するといったこともできます。

SCSSのデメリット

学習コスト

SCSSはCSSよりも機能が豊富であるため、その全ての機能を使いこなすには一定の学習コストが必要です。

コンパイルの必要性

SCSSはブラウザが直接解釈できる形式ではないため、使用する前にCSSにコンパイルする必要があります。これには追加のツールや設定が必要で、特に初心者にとっては難しいかもしれません。

デバッグの難易度

コンパイル後のCSSとSCSSのソースコードは必ずしも1対1で対応していないため、エラーや不具合の発生源を特定するのが難しくなる場合があります。しかし、ソースマップを利用することでこの問題はある程度緩和できます。

SCSSのはじめ方

SCSSを利用する方法は二通りあります。それぞれについて詳しく解説していきます。

SCSSのはじめ方①: npmを利用した方法

SCSSを使うには、まずSCSSをCSSに変換するコンパイラが必要です。コンパイラとはSCSSファイルをCSSに自動的に変換してくれる機能です。なぜこのコンパイラが必要かというと、webブラウザはSCSSのままではコードを読み込むことができませんので一度CSSに変換する必要があるからです。

ここでは、Node.jsのパッケージ管理ツールであるnpmを使用して、Node-sassというコンパイラをインストールし、SCSSをCSSにコンパイルする手順を説明します。（初心者には少し難しい方法なので、より簡単な方法を次のセクションで解説していますのでそちらをお読みください。）

ステップ1：Node.jsとnpmのインストール

Node.jsとnpm(Node Package Manager)は、SCSSをCSSにコンパイルするためのツールをインストールするために必要です。まず、Node.js(https://nodejs.org/ja)とnpmをインストールします。公式サイトからダウンロードしてインストールできます。

Node.jsとnpmのインストール方法はこちらのサイト(https://qiita.com/mk185/items/7ad004bf202f400daea1)で詳しく解説していますので参考にしてみてください。

ステップ2：Node-sassのインストール

次に、npmを使用してNode-sassをインストールします。Node-sassは、SCSSファイルをCSSにコンパイルするプラグインです。ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。

ターミナル/コマンド

1npm install -g node-sass 

このコマンドは、グローバル(-gオプション)にNode-sassをインストールします。

ステップ3：SCSSファイルの作成

次に、任意のテキストエディタを使用して新しいSCSSファイルを作成します。例えば、styles.scssという名前のファイルを作成し、以下のSCSSを記述します。

style.scss

1$main-color: blue;
2
3body {
4  color: $main-color;
5} 

ステップ4：SCSSをCSSにコンパイル

最後に、以下のコマンドを使用してSCSSファイルをCSSにコンパイルします。

ターミナル・コマンド

1node-sass styles.scss styles.css 

このコマンドは、styles.scssファイルをコンパイルして、同じディレクトリにstyles.cssというCSSファイルを出力します。

これでscssのコンパイルは完了しました。

SCSSのはじめ方②: VS Codeのプラグイン「Live Sass Compiler」を利用した方法

別の方法に、VS Codeのプラグイン「Live Sass Compiler」を使用した方法があります。詳しく解説していきます。

ステップ1: VS Codeのインストール

VS Codeのインストールがまだの方は、公式のVS Codeのwebサイト（https://code.visualstudio.com/）から、適切なバージョンのVS Codeをダウンロードしてインストールします。

ステップ2: Live Sass Compilerプラグインのインストール

1. VS Codeを起動します。
2. 左側のアクティビティバーから「Extensions」（拡張機能）アイコンをクリックします（四角が4つあるアイコン）。
3. 検索バーに「Live Sass Compiler」と入力します。
4. 「Live Sass Compiler」プラグインが表示されたら、インストールボタンをクリックしてプラグインをインストールします。

ステップ3: SCSSファイルの作成

1. 新しいフォルダを作成します（例:scss-project）。
2. scss-projectフォルダをVS Codeで開きます。
3. 右クリックしてコンテキストメニューを開き、新しいファイルを作成します（例:style.scss）。

ステップ4: Live Sass Compilerの設定

1. styles.scssファイルを開きます。
2. 左下のステータスバーにある「Watch Sass」アイコンをクリックします。（Watch Sassのアイコンがない場合は自動でコンパイルされるので以下の③と④のステップは省く）
3. ポップアップメニューが表示されるので、Watch Sassをクリックします。
4. settings.jsonファイルが開かれるので、設定を行います。（気になる方は変更しても良いが、基本的にはデフォルトのままでOK。）

設定例:

json

1{ 
2  "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/css" } ], 
3  "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.autoprefix": [],    
4  "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], 
5  "liveSassCompile.settings.showOutputWindow": true, "liveSassCompile.settings.quietMode": false, 
6  "liveSassCompile.settings.ignoreSubmodules": false 
7} 

上記の設定では、SCSSファイルを/cssフォルダにコンパイルし、.css拡張子を持つCSSファイルとして保存します。また、ソースマップの生成を無効化し、自動プレフィックスの適用を無効にします。

ステップ5: SCSSのコンパイルとライブプレビュー

1. styles.scssファイルを編集します。
2. 変更を保存すると、プラグインが自動的にSCSSをコンパイルし、CSSファイルが生成されます（例:style.css、style.css.map）。
3. 生成されたCSSファイルは、指定した保存先に保存されます。
4. ライブプレビューが自動的に更新され、変更が即座に反映されます。

以上がVS Codeのプラグイン「Live Sass Compiler」を使用したSCSSの使い方手順です。このプラグインを使うことで、SCSSファイルの変更をリアルタイムで監視し、自動的にコンパイルしてくれます。

SCSSの主な文法

SCSSには、CSSにはない様々な便利な文法があります。以下にいくつか例を挙げます。

1.ネスト

SCSSでは、CSSセレクタのネストが可能です。これにより、より構造化されたCSSコードを記述することができます。

style.scss

1div {
2  p {
3    color: blue;
4  }
5}

上記のSCSSは、次のCSSと同等です。

style.css

1div p {
2  color: blue;
3} 

2.変数

SCSSでは、値を変数に格納して再利用することができます。変数名は$で始めます。

style.scss

1$main-color: blue; 
2
3p { 
4  color: $main-color;
5 } 

上記のSCSSは、次のCSSと同等です。

style.css

1p { 
2  color: blue; 
3} 

3.mixin(ミックスイン)

ミックスインは、一連のスタイルを再利用可能なグループとして定義することができます。@mixinでミックスインを定義し、@includeで呼び出します。

style.scss

1@mixin border-radius($radius) { 
2  -webkit-border-radius: $radius; 
3  border-radius: $radius; 
4}
5
6.box {
7  @include border-radius(10px);
8} 

上記のSCSSは、次のCSSと同等です。

style.css

1.box { 
2  -webkit-border-radius: 10px;
3  border-radius: 10px;
4} 

1@mixin color-theme($background-color, $text-color) {
2  background-color: $background-color;
3  color: $text-color;
4}
5
6.button {
7  @include color-theme(#ff0000, #ffffff);
8  /* 他のスタイル */
9}
10

4.インポート

@importルールを使用すると、他のSCSSファイルを現在のファイルにインポートできます。これにより、スタイルシートをより管理しやすい小さな部分に分割することが可能になります。

style.scss

1@import 'reset'; 

上記のコードは、reset.scssファイルの内容を現在のファイル(style.scss)にインポートします。

5.演算子

SCSSでは、数値、色、または変数の演算が可能です。

style.scss

1.container { 
2  width: 100% / 3;
3} 

上記のSCSSは、次のCSSと同等です。

style.css

1.container {
2  width: 33.3333%;
3}

6.親セレクタの参照

SCSSでは、親セレクタを参照するための&キーワードが用意されています。&を使用することで、親セレクタ自体を参照して動的なスタイルや、擬似要素を作成することができます。

style.scss

1.btn {
2  background-color: blue;
3  
4  &:hover {
5    background-color: red;
6  }
7  &:nth-child(1) {
8    background-color: green;
9  }
10}
11

7.プロパティのネスト

SCSSでは、プロパティのネストを使用して、親要素のスコープ内に対応するプロパティをネストさせることができます。

style.scss

1.container {
2  background: {
3    color: #f0f0f0;
4    image: url("background.jpg");
5    position: center;
6    repeat: no-repeat;
7  }
8  
9  font: {
10    size: 16px;
11    family: Arial, sans-serif;
12    weight: bold;
13  }
14}
15

上記の例では、.containerクラス内にあるbackgroundとfontというプロパティがネストされています。それぞれのプロパティブロック内で、対応するプロパティとその値を指定することができます。

8.メディアクエリのネスト

SCSSでは、メディアクエリのネストを使用することで、より効率的にメディアクエリを管理することができます。

style.scss

1.container {
2  width: 100%;
3  
4  @media (max-width: 768px) {
5    background-color: #f0f0f0;
6    padding: 20px;
7    
8    h1 {
9      font-size: 24px;
10      color: blue;
11    }
12    
13    p {
14      font-size: 16px;
15      color: red;
16    }
17  }
18}
19

上記の例では、.containerクラス内にあるメディアクエリがネストされています。これにより、.containerクラスが指定された場合のデフォルトのスタイルと、画面幅が768px以下の場合に適用されるスタイルを、ひとつのルールセット内にまとめることができます。

これらがSCSSの主な文法です。SCSSはこれらの機能を通じて、CSSの再利用性、保守性、可読性を大幅に向上させることができます。

まとめ

SCSSはCSSをよりパワフルで効率的にするためのツールです。

その独特の文法と便利な機能は、Webデザインの効率を大幅に向上させ、またコードの可読性や保守性を向上させます。

ただし、SCSSを使用するためにはそれなりの勉強が必要となります。

それでもそのメリットは十分にそれらを上回ります。今日からSCSSを試して、あなたのCSSの書き方を一新してみてください。

あわせて読みたい

【完全初心者向け】SCSSとSASS:詳細比較と使い分けガイド

あわせて読みたい

フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較

すーさん

webデザイナー/webエンジニア

TwitterInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！
ポートフォリオ： https://jp.wordwidewebdesigner.com