【Sass】SCSSとは？書き方やlive sass compilerでの使い方を徹底解説！

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

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

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

すーさん

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

おすすめのプログラミングスクール

DMM WEB CAMP

未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。

入学金	0円
料金	169,800円(税込)〜
学び方	オンライン(自習形式)
校舎	ー
保証制度	8日間返金保証 早期卒業返金保証
就職サポート	○
運営会社	株式会社インフラトップ

【転職型スクールNo.1】エンジニア転職特化のプログラミングスクール_DMM WEBCAMP

詳しくはこちら

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

あわせて読みたい

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

フリーランスエンジニアにおすすめのエージェント

レバテックフリーランス

業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。

案件数	50,000件以上
リモート	○ （半分くらいがリモート対応）
単価	45万 〜 195万円
稼働日数	週5日が多め
福利厚生	◎
運営会社	レバテック株式会社

【レバテックフリーランス】フリーランス向け！
Webエンジニア案件情報サイト無料会員登録

詳しくはこちら

フリーランスエンジニアにおすすめのエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介していますので、ぜひチェックしてみてください。

あわせて読みたい

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

SCSSとは

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

これらの機能には、変数、ネスト、ミックスイン、継承などが含まれています。

SCSSの背後には、開発者がCSSをより効率的に記述できるようにするという主旨があります。

これにより、開発者はDRY（Don’t Repeat Yourself）の原則に従ってコードを書くことができます。

つまり、同じコードを何度も書く代わりに、変数やミックスインを使って一度書いたコードを再利用しようということです。

style.scss

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ファイルに貼り付けて、新しい機能を少しずつ追加することが可能です。

これにより、開発者は徐々に新機能を採用していき、すぐに大規模な書き換えをする必要がありません。

style.scss

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

すーさん

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

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

ただし、SCSSはブラウザが直接解釈できる形式ではないため、ブラウザが解釈できるCSSに変換（コンパイル）する必要があります。

そのため、開発環境にSCSSをコンパイルするツールをセットアップする必要があります。

幸い、多くのコンパイラ（Dart Sass、Node Sassなど）が利用可能であり、CLI（コマンドラインインターフェース）ツールや統合開発環境（IDE）のプラグインとして使用できます。

Sassとの違い

SCSSと同じくSASSというCSSのプリプロセッサーがあります。

これは基本概念はSCSSと同じですが、文法や書き方が異なってきます。

Sassの学習におすすめの書籍

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

LESSとの違い

LESSもSCSSと同じくCSSのプリプロセッサーです。

変数の書き方やJavascriptとの互換性があるといった違いがありますが、基本概念はSCSSと同じです。

CSSやSass、LESSとの違いに関してはCSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？で詳しく解説していますので、ぜひチェックしてみてください。

あわせて読みたい

CSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？

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で対応していないため、エラーや不具合の発生源を特定するのが難しくなる場合があります。

しかし、ソースマップを利用することでこの問題はある程度緩和できます。

Sassの学習におすすめの書籍

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

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の公式サイトから、適切なバージョンの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ファイルの変更をリアルタイムで監視し、自動的にコンパイルしてくれます。

Visual Studio Codeのおすすめプラグインに関してはVisual Studio Codeのおすすめプラグイン10選！インストール方法も解説でも詳しく解説してますので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

Visual Studio Codeのおすすめプラグイン10選！インストール方法も解説

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では、値を変数に格納して再利用することができます。

変数名は$で始めます。(LESSの場合は@マーク)

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.パーシャルとインポート

SCSSでは、パーシャル（小さなSCSSファイル）を作成して、それを他のSCSSファイルにインポートすることができます。

これにより、スタイルシートをより管理しやすい小さな部分に分割することができます。

パーシャル

パーシャルは、他のSCSSファイルからインポートされるための小さなSCSSファイルです。

パーシャルファイルの名前はアンダースコアで始めます。

例えば、_reset.scssというパーシャルファイルを作成し、以下のような内容を記述することができます。

reset.scss

1// _reset.scss
2html,
3body,
4ul,
5ol {
6  margin: 0;
7  padding: 0;
8}

インポート

インポートを使用すると、パーシャルファイルを他のSCSSファイルに取り込むことができます。

例えば、上記の_reset.scssをメインのSCSSファイルからインポートすることができます。

main.scss

1// main.scss
2@import 'reset';
3
4body {
5  font-family: 'Helvetica, Arial, sans-serif';
6  font-size: 16px;
7}

この例では、main.scssファイルから_reset.scssファイルをインポートしています。

@importディレクティブを使用する際には、アンダースコアと拡張子を省略することが一般的です。

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の再利用性、保守性、可読性を大幅に向上させることができます。

Sassの学習におすすめの書籍

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

まとめ

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

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

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

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

すーさん

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

TwitterInstagramLINEContact

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