複数画像に対応可！CSSのfilterプロパティでimgを美しく表示する方法
susan すーさんのweblog
【Sass】SCSSとは？書き方やlive sass compilerでの使い方を徹底解説！
susan
記事内に商品プロモーションを含む場合があります
今日のWeb開発界隈では、様々な新しいテクノロジーやツールが日々登場しています。
その中でも特に注目を浴びているのが、CSSプリプロセッサーと呼ばれるもので、その中でもSCSSは非常に人気があり、多くの開発者に利用されています。
SCSSとはCSSの上位互換で、開発効率を何倍にも上げてくれるものです。
本記事では、SCSSの基本的な概要、そのメリット・デメリット、主な文法、そして使い方について詳しく解説していきます。
エンジニアにおすすめのパソコンはこちら！
おすすめのプログラミングスクール
DMM WEB CAMP
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
| 入学金 | 0円 |
| 料金 | 169,800円(税込)〜 |
| 学び方 | オンライン(自習形式) |
| 校舎 | ー |
| 保証制度 | 8日間返金保証 早期卒業返金保証 |
| 就職サポート | ○ |
| 運営会社 | 株式会社インフラトップ |
おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説しているので、興味ある方はぜひチェックしてみてください。
あわせて読みたい
【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選
フリーランスエンジニアにおすすめのエージェント
レバテックフリーランス
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
| 案件数 | 50,000件以上 |
| リモート | ○ （半分くらいがリモート対応） |
| 単価 | 45万 〜 195万円 |
| 稼働日数 | 週5日が多め |
| 福利厚生 | ◎ |
| 運営会社 | レバテック株式会社 |
フリーランスエンジニアにおすすめのエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較で詳しく紹介していますので、ぜひチェックしてみてください。
あわせて読みたい
フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ？12社を徹底比較
Contents
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の学習におすすめの書籍
LESSとの違い
LESSもSCSSと同じくCSSのプリプロセッサーです。
変数の書き方やJavascriptとの互換性があるといった違いがありますが、基本概念はSCSSと同じです。
CSSやSass、LESSとの違いに関してはCSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？で詳しく解説していますので、ぜひチェックしてみてください。
あわせて読みたい
CSS、Sass、SCSS、LESSを徹底比較！結局どれが良い？
SCSSのメリット・デメリット
以下、SCSSのメリットとデメリットです。
SCSSのメリット
メリット
- 保守性と可読性の向上
- コードの再利用
- 大規模なプロジェクトでのスケーラビリティ
- 演算機能
- 完全なCSS互換性
保守性と可読性の向上
SCSSでは、ネストや変数、ミックスインなどの機能を使って、CSSよりも構造化されたスタイルシートを作成することができます。
これにより、コードの可読性と保守性が向上します。
コードの再利用
SCSSでは、ミックスインや変数を使って、一度定義したスタイルルールを簡単に再利用することができます。
これにより、コードの重複を避けることができます。
大規模なプロジェクトでのスケーラビリティ
SCSSは、@importや@useディレクティブを使って、スタイルシートを複数のファイルに分割することができます。
これにより、大規模なプロジェクトでもスタイルシートの管理が簡単になります。
演算機能
SCSSには、色や数値の演算機能があります。
これにより、色の調整やレイアウトのサイズ調整をコード上で行うことができます。
完全なCSS互換性
SCSSはCSSのスーパーセット(進化版)であるため、既存のCSSコードはそのままSCSSとして動作します。
これにより、徐々にSCSSの新しい機能を導入するといったこともできます。
SCSSのデメリット
デメリット
- 学習コスト
- コンパイルの必要性
- デバッグの難易度
学習コスト
SCSSはCSSよりも機能が豊富であるため、その全ての機能を使いこなすには一定の学習コストが必要です。
コンパイルの必要性
SCSSはブラウザが直接解釈できる形式ではないため、使用する前にCSSにコンパイルする必要があります。
これには追加のツールや設定が必要で、特に初心者にとっては難しいかもしれません。
デバッグの難易度
コンパイル後のCSSとSCSSのソースコードは必ずしも1対1で対応していないため、エラーや不具合の発生源を特定するのが難しくなる場合があります。
しかし、ソースマップを利用することでこの問題はある程度緩和できます。
Sassの学習におすすめの書籍
SCSSのはじめ方
SCSSを利用する方法は以下の二通りがあります。
SCSSのはじめ方
- SCSSのはじめ方①: npmを利用した方法
- SCSSのはじめ方②: VS Codeのプラグイン「Live Sass Compiler」を利用した方法
それぞれについて詳しく解説していきます。
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プラグインのインストール
- VS Codeを起動します。
- 左側のアクティビティバーから「Extensions」（拡張機能）アイコンをクリックします（四角が4つあるアイコン）。
- 検索バーに「Live Sass Compiler」と入力します。
- 「Live Sass Compiler」プラグインが表示されたら、インストールボタンをクリックしてプラグインをインストールします。
ステップ3: SCSSファイルの作成
- 新しいフォルダを作成します（例:scss-project）。
- scss-projectフォルダをVS Codeで開きます。
- 右クリックしてコンテキストメニューを開き、新しいファイルを作成します（例:style.scss）。
ステップ4: Live Sass Compilerの設定
- styles.scssファイルを開きます。
- 左下のステータスバーにある「Watch Sass」アイコンをクリックします。（Watch Sassのアイコンがない場合は自動でコンパイルされるので以下の③と④のステップは省く）
- ポップアップメニューが表示されるので、Watch Sassをクリックします。
- 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のコンパイルとライブプレビュー
- styles.scssファイルを編集します。
- 変更を保存すると、プラグインが自動的にSCSSをコンパイルし、CSSファイルが生成されます（例:style.css、style.css.map）。
- 生成されたCSSファイルは、指定した保存先に保存されます。
- ライブプレビューが自動的に更新され、変更が即座に反映されます。
以上が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}
mixinの引数
mixinには、引数を指定することができます。引数を使用することで、mixin内で値を受け取り、動的にスタイルを生成することができます。
これにより、より柔軟性の高いスタイルの再利用が可能となります。
下の例では、buttonクラスのcolor-themeに対して、#ff0000と#ffffffという値を引数として渡しています。
style.scss
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の学習におすすめの書籍
まとめ
SCSSはCSSをよりパワフルで効率的にするためのツールです。
その独特の文法と便利な機能は、Webデザインの効率を大幅に向上させ、またコードの可読性や保守性を向上させます。
ただし、SCSSを使用するためにはそれなりの勉強が必要となります。
それでもそのメリットは十分にそれらを上回ります。今日からSCSSを試して、あなたのCSSの書き方を一新してみてください。
エンジニアにおすすめのパソコンはこちら！
コーディングやプログラミングを勉強したい方はこちらの記事がおすすめ
レンタルサーバーをお探しの方はこちらの記事がおすすめ
副業案件をお探しの方はこちらの記事がおすすめ！
ABOUT ME
30代web業界未経験
→オーストラリアにIT留学
→現地インターンを1年半経験
→フリーランスwebデザイナー・エンジニアとして活動
→月収80万円達成！
