次世代のCSS記法、Sass入門〜実行環境構築から基本的な機能について〜

2017/06/08 15:17

プレーンなCSSのみでコーディングをしていると、カラーの変更やスタイルの使い回しのために、何度もコピー&ペーストを行わなければならない場面によく遭遇します。大規模なサイトになるとソースコードは何千行にもなり、ちょっとした編集でも、該当する箇所を調べて編集するために想像以上の時間が掛かったりするものです。

「CSSで四則演算ができたら」
「変数でカラーコードを一括で変換したい」
「可能な限りソースコードを短くしたい」
「同じコードをもっと簡単に使いまわしたい」

そんな悩みが少しでも頭をよぎったならば、ぜひ『Sass (サス)』の導入を検討してみてはいかがでしょうか？

Sass (サス) とは？

Sass (サス) はCSSを効率的に記述するために設計されたCSSのメタ言語です。Sassの拡張子は『.sass』『.scss』の二つがあり、よく使用されているのは『.scss』です。
SassはCSSの記述に関する多くの便利な機能を追加してくれます。新しいことを覚えるようで難しく感じてしまうかもしれませんが、『.scss』形式であれば通常のCSSで記述できるため、少しずつSassの機能を使用していけば学習コストもそこまで高くありません。

Sassはそれ単体では通常利用せず、最終的にはCSSにコンパイル(変換)して使用します。

Sassの導入

まずはSassのコンパイルを行う実行環境を用意する必要があります。いくつか方法がありますが、今回は処理速度が速いと評判の『node-sass』を利用してSassの実行環境を最小構成で作っていきます。

※node-sassの利用にはNode.jsのインストールが必要となります。この記事ではNode.jsがあらかじめ導入されているのを前提として解説させていただきます。
もしまだNode.jsがインストールされていないのであれば、インストール手順をWindows・Mac別に記事にしていますので、お役立ていただければ幸いです。

Node.jsのインストール (Windows編)

この記事では、Node.jsの詳しい説明は行わず、Node.jsのバージョン管理システム導入からNode.jsのインストールまでをゴールとして、解説していきます。

Node.jsのインストール (Mac編)

この記事では、MacにおけるNode.jsのインストールを、バージョン管理システム『ndenv』を経由して解説します。

node-sassのインストール (Mac OS編)

node-sassはターミナルからコマンドを打ち込んでインストールする必要があるため、まずターミナルを開きます。

ターミナルは『アプリケーション＞ユーティリティ』にあります。

ターミナルを開くと下記のような画面になると思います。


          Last login: Thu Jun  1 14:15:44 on ttys000
          {{ユーザー名}}:~ {{マシン名}}$

『$』以降に以下のコマンドを打ち込んでEnterします。


          $ npm i -g node-sass

これでインストールは完了しました。最後に念のため動作確認をします。以下のコマンドでnode-sassのバージョン情報を表示します。


          $ node-sass -v

バージョンが以下のように表示されたらOKです。


          $ node-sass -v
          node-sass	3.7.0	(Wrapper)	[JavaScript]
          libsass  	3.3.6	(Sass Compiler)	[C/C++]

node-sassのインストール (Windows編)

Windows版のNode.jsが既に入っているのであればMacと同じようにインストールできますが、Windows標準のコマンドプロンプトは非常に使いにくいため、別途ターミナルエミュレータを導入することをお勧めします。

※ この記事ではWindowsへ既にNode.jsとターミナルエミュレータが導入されていることを前提に解説させていただきます。
Macと同じく、ターミナルからの作業となりますので、まずはWindowsのターミナルエミュレータを起動してください。


          {{ユーザー名}}:~ {{マシン名}}$


       $ npm i -g node-sass


          $ node-sass -v


      $ node-sass -v
      node-sass	3.7.0	(Wrapper)	[JavaScript]
      libsass  	3.3.6	(Sass Compiler)	[C/C++]

補足：おすすめのWindows用ターミナルエミュレータ『cmder』

Cmder

筆者も使用しているお気に入りのWindows用ターミナルエミュレータは『cmder』です。今まで使用したエミュレータの中でも、もっともインストールが簡単で、すぐに利用できるのが気に入っています。

Sassの実行

①では実際にnode-sassを経由してSassを使用してみます。node-sassの操作は基本的にターミナルコマンドでの作業となります。Sassがどのようにコンパイルされ、CSSファイルとなるのか、実際に試しながら見ていきましょう。今回はSassに二つある拡張子のうち、もっとも普及している『.scss』形式で解説します。

事前準備：.scssファイルの作成

まずはじめに、Mac・Windows共にユーザーディレクトリが存在しますので、ユーザーディレクトリ配下に適当なディレクトリを作り(ここでは仮に『sass』というディレクトリを作成)、『style.scss』を文字コードUTF-8 BOMなしで作成します。

style.scss例:Mac

style.scss例:Windows

②style.scssをテキストエディタで開きます。

③適当にCSSを記述して保存します。


      .test {
        font-size: 16px;
        font-weight: 700;
      }

これでSassをテストする準備が整いました。次はいよいよSassのコンパイルを実行してみます。

Sassのコンパイル

①ターミナルでstyle.scssがあるディレクトリへ移動します。

例:Macで以下画像のようなディレクトリの場合


          $ cd /Users/{{ユーザー名}}/Developments/sass

例:Windowsで以下画像のようなディレクトリの場合


          $ cd C:\Users\{{ユーザー名}}\Developments\sass

②移動したディレクトリにstyle.scssが存在するか確認します。ターミナルで以下コマンドを実行します。2行目にstyle.scssと表示されたらOKです。


          $ ls
          style.scss

③ではターミナルでnode-sassのコマンドを実行し、style.scssのコンパイルを行います。以下のコマンドを実行してください。


          $ node-sass style.scss style.css

コマンドの説明

node-sassの部分はnode-sassをターミナルで実行する際のコマンドです。続くstyle.scssはコンパイル元のscssファイルを指定している部分です。最後のstyle.cssはコンパイル後のcssの名称を設定して出力先を決めています。
この場合、出力先はstyle.scssと同じディレクトリとなっています。

コマンド実行後、以下のようなログが流れると思います。


          $ node-sass style.scss style.css
          Rendering Complete, saving .css file...
          Wrote CSS to /Users/mac/Developments/sass/style.css

これでコンパイルは実行されました。sassディレクトリ内に『style.css』が作成されたと思います。

④実際にstyle.cssの内容を覗いてみましょう。テキストエディタでstyle.cssを開きます。以下のようなソースコードになっていれば、コンパイルは正常に動作しています。


          .test {
            font-size: 1.6rem;
            font-weight: 700; }

※インデントがおかしいのは仕様です。

以上がSassがコンパイルされるまでの一連の流れとなります。

Sassを実際に使用する際に便利なコマンド

このままではscssファイルを変更するたびにターミナルコマンドを実行しなくてはならないためとても不便です。実際にSassを利用する場合はコンパイルの自動化を行うのが便利ですので必ず覚えておきましょう。以下で便利なコマンドをいくつか解説します。

–watch, -w


          $ node-sass style.scss style.css -w

-wをコンパイルのコマンドに追記することで、style.scssを変更するたびにコンパイルを実行してくれるようになります。ちなみに-wの部分は–watchとも記述できます。

–output-style


          $ node-sass style.scss style.css --output-style expanded

–output-styleは出力するコードの整形を指定できます。指定できるパターンは以下の通りです。

nested
デフォルト値。(ちょっと閉じタグがおかしい)
expanded
キレイに整形
compact
CSSプロパティを一行にまとめる
compressed
改行や無駄なスペースを削除

複数指定もできます


          $ node-sass style.scss style.css --output-style expanded -w

上記コマンドはstyle.scssが変更されるたびstyle.cssへのコンパイルを自動で行い、かつコンパイル後のソースコードをキレイに整形してくれます。

Sassの機能

Sassの実行環境構築の解説が長くなりましたが、ここからが本題です。Sassの便利な機能をサンプルコードも交えて解説していきます。

コメントアウト

SassではCSSで使用できる/* */の他に、//で一行のコメントアウトを使用できます。また//でコメントアウトしたテキストはコンパイル後に表示されない特性を持っています。

SCSS


      // 横一列中央寄せ
      // コンパイル後は上記コメントは削除されます
      .grid-box {
        display: flex;
        justify-content: center;
      }
      
      /* 共通のコンテナ */
      .container {
        max-width: 960px;
        margin: 0 auto;
      }

コンパイル後のCSS


          .grid-box {
            display: flex;
            justify-content: center;
          }
          
          /* 共通のコンテナ */
          .container {
            max-width: 960px;
            margin: 0 auto;
          }

変数

CSSにはない機能として、Sassでは変数が使用できます。変数の指定は$マークの後に変数名です (例. $main-color: #888;)。カラーコードやpadding,marginなどの値を一括で変更するのに便利です。

SCSS


          $base-color: #666;
          $base-space: 15px;
          
          body {
            color: $base-color;
          }
          
          .panel {
            border: 1px solid $base-color;
            padding: $base-space;
          }

コンパイル後のCSS


          body {
            color: #666;
          }
          
          .panel {
            border: 1px solid #666;
            padding: 15px;
          }

入れ子 (ネスト)

親要素内でインデントしてもう一度要素を指定してあげるとネストを指定できます。

SCSS


          .heading-block {
            padding: 10px 15px;
          
            .h1 {
              font-size: 20px;
              color: #999;
            }
          
            p {
              font-size: 14px;
            }
          }

コンパイル後のCSS


              .heading-block {
                padding: 10px 15px;
              }
              
              .heading-block .h1 {
                font-size: 20px;
                color: #999;
              }
              
              .heading-block p {
                font-size: 14px;
              }

四則演算

Sassでは四則演算も行うことができます。加算は+,減算は-,乗算は*,除算は/を使用します。変数に対しても四則演算は実行可能です。しかし%とpxを混在することなどはできないのでそれだけ留意してください。

SCSS


          $base-padding: 5px;
          
          .row {
            display: flex;
          }
          .col-3 {
            width: (100% / 3);
          }
          .container {
            padding: ($base-padding * 2) ($base-padding * 3);
            width: (100% - 10);
          }

コンパイル後のCSS


              .row {
                display: flex;
              }
              
              .col-3 {
                width: 33.33333%;
              }
              
              .container {
                padding: 10px 15px;
                width: 90%;
              }

mixin (ミックスイン)

@mixinで指定した要素を@includeで呼び出す事ができます。引数も指定できます。よく使いまわす要素群をまとめておくのに便利です。

SCSS


                  // 引数指定
                  @mixin border-bottom($color: #666) {
                    border-bottom: 1px solid $color;
                  }
                  // @mixinに更に@includeで読み込める
                  @mixin box-layout {
                    padding: 30px;
                    @include border-bottom;
                  }
                  
                  // 引数の複数指定も可能
                  @mixin grid-block($font-color: #666, $bg-color: #bbb) {
                    color: $font-color;
                    background: $bg-color;
                  }
                  
                  h1 {
                    // 引数の中身を変更
                    @include border-bottom(#2a0);
                  }
                  
                  .block {
                    @include box-layout;
                  }
                  
                  .panel {
                    @include grid-block();
                    padding: 15px;
                  }

コンパイル後のCSS


                  h1 {
                    border-bottom: 1px solid #2a0;
                  }
                  
                  .block {
                    padding: 30px;
                    border-bottom: 1px solid #666;
                  }
                  
                  .panel {
                    color: #666;
                    background: #bbb;
                    padding: 15px;
                  }

extend (エクステンド)

mixinと似ていますが、extendはクラスの要素を維持したまま継承することができます。@extendでクラスを呼び出します。場面に応じてmixinかextendを使用するといいでしょう。

SCSS


                      .box {
                        margin-top: 15px;
                        padding: 10px;
                        background-color: #ccc;
                      
                        p {
                          line-height: 1.8;
                        }
                      }
                      
                      .content {
                        @extend .box;
                        background-color: #eee;
                      }

コンパイル後のCSS


                      .box, .content {
                        margin-top: 15px;
                        padding: 10px;
                        background-color: #ccc;
                      }
                      
                      .box p, .content p {
                        line-height: 1.8;
                      }
                      
                      .content {
                        background-color: #eee;
                      }

placeholder selector (プレースホルダーセレクタ)

extendする元のクラスをCSSに出したくないとき、プレースホルダーセレクタを使うと解決できる場面があります。 %で定義して、@extendで呼び出します。

SCSS


                          %box {
                            margin-top: 15px;
                            padding: 10px;
                            background-color: #ccc;
                          }
                          
                          .contents {
                            @extend %box;
                            p {
                              line-height: 1.8;
                            }
                          }
                          
                          .note {
                            @extend %box;
                          }

コンパイル後のCSS


                          .contents, .note {
                            margin-top: 15px;
                            padding: 10px;
                            background-color: #ccc;
                          }
                          
                          .contents p {
                            line-height: 1.8;
                          }

ampersand (アンパサンド)

&を使って擬似要素や親クラスの名称を継承することができます。

SCSS


                              .block {
                                width: 960px;
                              
                                &-element {
                                  padding: 10px;
                              
                                  &:hover {
                                    text-decoration: underline;
                                  }
                              
                                  &-modifier {
                                    border: #666 solid 1px;
                                  }
                                }
                              }

コンパイル後のCSS


                              .block {
                                width: 960px;
                              }
                              
                              .block-element {
                                padding: 10px;
                              }
                              
                              .block-element:hover {
                                text-decoration: underline;
                              }
                              
                              .block-element-modifier {
                                border: #666 solid 1px;
                              }

@import (インポート)

Sassの@importはコンパイルの時にCSSを一つにまとめることができます。CSS3の@importとはその仕様も異なりますので注意してください。

インポート前提で作成したSCSSファイルにはアンダースコアをファイル名の先頭に付けてあげましょう。コンパイル時に除外されます。アンダースコア( _ )がついているファイルは、partials(パーシャル)と呼ばれるインポート専用のファイルになります。

以下、_reset.scssとstyle.scssが同じ階層にあることを前提としてCSSを一つにまとめる記述例です。

SCSS


                                  html {
                                    padding: 0;
                                    margin: 0;
                                  }
                                  
                                  body {
                                    padding: 0;
                                    margin: 0;
                                  }

style.scss


                                  @import 'reset';
                                  
                                  .block {
                                    display: block;
                                  }

コンパイル後のCSS


                                  html {
                                    padding: 0;
                                    margin: 0;
                                  }
                                  
                                  body {
                                    padding: 0;
                                    margin: 0;
                                  }
                                  
                                  .block {
                                    display: block;
                                  }

まとめ

Sassは実行環境を構築するまでが結構大変ですが、それでもCSSコーディングにおいてSassには「あったらいいな」と思う機能が多くあり、その利便性は確実にCSSコーディングの効率化に繋がると思います。
Sassを使ってみたいと悩んでいる方や、Sassを最小構成で動作させる実行環境マニュアルとしても、この記事がお役に立てば幸いです。