2021年賀状用「牛（丑）のイラスト」ダウンロードスタート！

初心者用SCSSの使い方まとめ【CSSとの違い、記述方法、導入、CSSへの変換まとめて解決！】

2020-08-18
Web

長らく放置していたofficehojoのポートフォリオサイトを改造中です。日々の更新系はこちらのblogへ移動し、被ってるコンテンツは削ってよりミニマムでシンプルな構造にしようと考えています。

そして、この機会に「SCSS」の導入も検討。なるべくSCSSを使いながらWeb制作ができたら便利かなと思い、ざっと学んだことをまとめてみました。

時間がなかったり、面倒でSASSやSCSSを放置していた皆様、一緒に理解を深めましょう！

【あとがき】初稿後、実際にSCSSでのサイト制作に入りました。後から気づいたことやエラーなどをまとめ直したので、初心者用のSCSS（SASS）導入ノートとしてご覧ください。

目次

SCSSとは？【CSSやSASSとの違い（CSS→SASS→SCSSへ進化）】

Web業界で活躍している方ならもうすでに使っているであろうSASS/SCSS（Syntactically Awesome StyleSheet）。直訳すると「構造的に優れたCSS」という意味で、htmlコードやjsプログラムに近い形で記述できる進化版CSSというのがSCSS（SASS）の特徴らしいです。具体的には、

  1. htmlやjsコードのように入れ子構造で記述ができる（ネスト化が可能）
  2. 関数（演算）、変数などのプログラムが使える

ということですね。

混在しやすいSASSとSCSSの違いは、コードの記述方法だけ。大きな括りでSASSという新しいメタ言語が登場し、その記述方法がSASS方式（インデントのみ）とSCSS方式（通常のCSS+ネスト構造）に分かれているということなんですね。現在はCSSに近い記述方法のSCSSが主流らしいです。（{}や;をつける）

SASSの登場により、重複していたコードをまとめたり、変数を使って自動処理を組んだりできるようなりました。特に作業量の多い制作現場などでは効率化が期待でき、CSSからSCSS（SASS）への移行が進んでいるようです。

ただ、間違えてはいけないのが、SASSにしてもSCSSにしても、そのままファイルとして保存すればCSSのように使えるというわけではないということ。SASSシステムをPCへインストールし、最終的にはCSSファイルに変換（コンパイル）しないと使えないみたいなので、導入までのハードルはいくつかあります。

つまりSCSS（SASS）とは「制作側が楽になるCSSの新しい記述方法」というのが正解。

では、具体的にどうやって使っていくのか。使用例をあげてみましょう。

1. 入れ子構造（ネスト化）で重複セレクタを省略できる【コードが減って効率的】

従来のCSSでは、親 > 子 > 孫と、継承意外のスタイルを指定をする場合にはそれぞれのセレクタを並べて記述することが必須でした。たとえば<nav>ファミリーである<ul>や<li>にスタイルを使う場合、こんな感じで記述しますよね。

nav{
    background-color:#000;
    color:#fff;
}
nav ul{
    margin:2em;
}
nav ul li{
    padding:1em;
}
nav ul li:hover{
    color:#999;
}

下層に行けば行くほど重複が増えるので、大体は各タグにclass指定をして省略することが多いと思います。

ただし、classも増えすぎると管理が大変で、だんだん効かなくなってくることも大いにあります。さらに同じスタイルを別の場所へ移すとき、コピペするのも非常に手間。見つけるのも大変。コードが増えると結構面倒な作業が倍々ゲームで増えていくわけです。

管理を楽にするためにはCSSファイルを複数に分け、@importで読み込めばいいのですが、読み込み速度の関係上、あまり推奨できるものではないらしいんですね。

そこでSCSSでは、ファミリーごとにグループ化し、入れ子構造（ネスト）にすることでコードを簡易化できるメリットがあります。

nav{
    background-color:#000;
    color:#fff;
    ul{
       margin:2em;
       li{
          padding:1em;
          &:hover{
                  color:#999;
                  }
          }
       }
     }

htmlコードと同じ構造で作っていくことができるので管理がしやすいし、コードの数も減るので一石二鳥です。（注意：ネスト構造では半角スペースが入るため、「:hover」などの前には「&」をつけること）

さらに、fontやborderなどの複数派生するプロパティをまとめることもできます。

nav{
    border:{
        top: 1px;
        radius: 50px;
    }
　　 font:{
          size: 0.8em;
          color: #fff;
    }
}

さらにさらに、「@media screen and()」を差し込むことで、セレクタごとにレスポンシブ記述していくことも可能になります。（これ結構楽じゃないですか？）

コードが量産される大規模サイトでは特に、SCSSの威力が発揮できることが理解できます。

2. 関数や変数などのプログラムが使える

通常、プログラムを読み込む場合には、htmlで.jsファイルを読み込むか、直接scriptを書き込むかの2択かと思いますが、SCSSではセレクタ毎に直接プログラム関数や変数を書き込むことができるようになります。

つまり、先にフレームワークを用意しておけば、パーツごとの量産や一括修正などの作業ができるようになるということ（Bootstrap方式）。後々変更になりやすいキーカラーやカラム幅、ボタンなど、繰り返し使うパーツを量産しなくてもいいのです。

例えば変数（$）を使ってカラーを統一すれば、一行だけの変更で全ての同じコードが一括置換できるように。

$black:#000;
$white:#fff;

nav{
    color:$black;
    ul{
       color:$white:
    }
}

カラム幅などのサイズ調整も、演算で指定すれば計算要らず。

$col1:100%/3;
$col2:100%/4;

.col1{
    width:$col1;
}
.col2{
    width:$col2;
}

コンテンツ数が変更になっても、カラム幅を調整してカラム数を変更すればすぐに対応できます。（分母を変更するだけ）

@mixinと@includeで共通スタイルを使い回す

ボタンやフレームなどを@mixin〜でパーツ化しておけば、@include〜の一行記述だけで様々なセレクタに使い回すことができます。（パーツは@mixin、呼び出しは@include）

@mixin circle{
  width: 50px;
  height: 50px;
  background: #fff;
}

.col1 {
  @include circle;
}

「.col1」には「@mixin circle」のスタイルがそのまま適応されます。なんと楽！

さらに引数を使えば、セレクタ毎に変化させることも可能。

@mixin circle($width:50px, $height:50px, $bg_color:white) {
  width: $width;
  height: $height;
  background: $bg_color;
}

.col1 {
  @include circle();
}

.col2 {
  @include circle(100px, 100px, red);
}

「.col1」には「@mixin circle」のスタイルがそのまま適応され、「.col2」には「width:100px、height:100px、color:red」に変換されて適応されます。

レスポンシブもこの通り。

/*（各デバイスの画面幅を指定）*/
$pc: 1024px;
$tab: 768px;
$sp: 480px;

@mixin pc {
    @media screen and (min-width: $tab) {
        @content;
    }
}
@mixin tab {
    @media screen and (min-width: $sp) and (max-width: $tab) {
        @content;
    }
}
@mixin sp {
    @media screen and (max-width: $sp) {
        @content;
    }
}
---
/*（呼出）*/
main{
@include sp{
    width:95%;
}

@extendでスタイルのコピー（継承）

すでに使っているセレクタのスタイルを継承させるときには@extendを使います。（セレクタのグループ化）

.col1{
  width: 50px;
  height: 50px;
  background: #fff;
}

.col2{
  @extend .col1;
  background:#111
}

「.col2」に「.col1」のスタイルを継承し、backgroundだけ#111に変更できます。（@extendではセレクタがグループ化されるようです）

他にも@ifや@elseなどの制御系プログラム記述も使えるみたいなので、scriptが使える方には朗報ですね。私は今だにscriptをしっかり理解できていないので、今回はスルーの方向で。とりあえずSCSSの代表的な使い方だけをまとめてみました。

そして冒頭でも言った通り、SCSSを使うには、PCにSASSのシステムをインストールすることが必須です。今回はMac版の導入方法について書いておきます。

MacでSCSS（SASS）を使う方法（ターミナルで環境を整える）

まず、SCSSを動かすには「Ruby」と「Sass」、さらにSassをインストールするための「XCode」をターミナルを使ってインストールする必要があります。（ターミナルの場所は「アプリケーション > ユーティリティ」の中）

MacにはあらかじめRubyが入っているようなので「Sass」（と「XCode」）のインストールを進めます。

念のため、Rubyが入っているかどうかチェックするためにターミナル画面にコードを入力してみてください。（$は省略可）

$ ruby -v

「ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]」的なレスポンスが返ってくれば大丈夫です。

次に、「Sass」をインストールします。ターミナル画面にこちらを入力してみてください。

$ sudo gem install sass

PWを聞かれるので、ユーザーPWを入力します。「Successfully installed sass」と出れば成功ですが、「ERROR:  Error installing sass」的なエラーコードが出たら「XCode Command Line Tools」のインストールが必要になります。（ターミナルで下記入力）

$xcode-select --install
$sudo gcc --version

そして再度、Sassのインストールコードを入力。

$ sudo gem install sass

同じくPWを入力し、「Successfully installed sass-3.7.4」というようなコードが返ってきたら成功です。

SCSS（SASS）→CSSへのコンパイル【Mac編】

MacにRubyやSassをインストールしたからといって、単純に.scss保存すると自動的に.cssへ置き換わるというわけではないようです。.scssファイルを.cssへ置き換えるには、コンパイルという変換が必要なんですね。

このcssコンパイル方法はいろいろあるみたいなんですが、私が一番簡単だなと思ったのが「Brackets」の拡張機能「SASS Autocompile」を使った自動生成方法。Bracketsを使ってる方ならこれで解決。

拡張機能マネージャーから「SASS Autocompile」をインストールすれば、.scssファイルがある同一フォルダ内に.cssファイルが自動生成されます。保存するたびに更新してくれるのも便利。

この方法なら、html側のリンクパスも変えずに済むし、リアルタイムでプレビューもできます。

Brackets以外でのコンパイル方法としては、「Koalaなどのコンパイラを使う」方法か「ターミナルでコマンドを使う」方法などがありますが、私は上のプレビューエラー問題により、ターミナルでのcssコンパイル方法を使っています。

下準備として、.scssファイルはscssフォルダへ格納し、空のcssフォルダを用意。ターミナルへの指示は「指定したルートフォルダ内にあるscssフォルダの.scssファイルをcssへコンパイルし、cssフォルダへ保存する」です。

1.まずは該当のルートフォルダへ移動。デスクトップなら「$ cd Desktop/フォルダ名」ですかね。ターミナルへドラッグ&ドロップが一番早いです。

$ cd ルートフォルダの場所（パス）

2.基本的なsassコマンド。（scssフォルダのindex.scssを、cssコンパイルしてcssフォルダへ保存）

$ sass scss/index.scss:css/index.css

scssとcssのファイル名は任意で置き換えてください。

3.次に、コンパイルするとデフォルトで残るインデントを削除し、cssへコンパイルするstyle expandedコマンド。（cssが左寄せで揃う）

$ sass --style expanded scss/index.scss:css/index.css

4.scssフォルダに入っている.scssファイルを丸ごと全部cssコンパイルしたい場合に使うwatchコマンド。

$ sass --style expanded --watch scss:css

これで、scssフォルダの中にあるすべての.scssが.cssへ変換され、cssフォルダへ格納されます。このコマンド処理はターミナルを終了するまで続くので、止めたい時にはショートカットキー「Ctrl + C」でストップさせます。

これで自動cssコンパイルができるようになりましたが、Bracketsでライブプレビューが使えない問題が解決していなので、しばらくはターミナルコマンドに頼るしかないですね。

【Bracketsのライブプレビューでエラー】
Bracketsで「ファイルを開く」からルートフォルダを取り込むと、なぜだかライブプレビューが使えないというエラーに遭遇します。直接ファイルをドラッグ&ドロップで開くとライブプレビューは使える。拡張機能を使ったscss自動生成を使うにはファイルを開くメニューから更新する必要があるので、現在は直接ドラッグ&ドロップでファイルを更新し、ターミナルでCSSコンパイルしています。