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

プレーンなCSSのみでコーディングをしていると、カラーの変更やスタイルの使い回しのために、何度もコピー&ペーストを行わなければならない場面によく遭遇します。

大規模なサイトになるとソースコードは何千行にもなり、ちょっとした編集でも、該当する箇所を調べて編集するために想像以上の時間が掛かったりするものです。

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

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

Sass (サス) はCSSを効率的に記述するために設計されたCSSのメタ言語です。Sassの拡張子は『.sass』『.scss』の二つがあり、よく使用されているのは『.scss』です。

SassはCSSの記述に関する多くの便利な機能を追加してくれます。

新しいことを覚えるようで難しく感じてしまうかもしれませんが、『.scss』形式であれば通常のCSSで記述できるため、少しずつSassの機能を使用していけば学習コストもそこまで高くありません。

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

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

node-sassの利用にはNode.jsのインストールが必要となります。この記事ではNode.jsがあらかじめ導入されているのを前提として解説させていただきます。

もしまだNode.jsがインストールされていないのであれば、インストール手順をWindows・Mac別に記事にしていますので、お役立ていただければ幸いです。

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

JavaScriptはブラウザ上で動作させるために開発されたプラグラミング言語ですが、それをサーバーサイドでも動作するように開発された実行環境が『Node.js』です。 Node.jsは現在非常に注目を集めている実行環境…

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

以前に『Node.jsのインストール (Windows編)』の記事にてWindowsにおけるNode.jsのインストール手順について解説させていただきました。 今回はMacにおけるNode.jsのインストール手順を解説し…

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++]
    

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』です。今まで使用したエミュレータの中でも、もっともインストールが簡単で、すぐに利用できるのが気に入っています。

①では実際にnode-sassを経由してSassを使用してみます。

node-sassの操作は基本的にターミナルコマンドでの作業となります。Sassがどのようにコンパイルされ、CSSファイルとなるのか、実際に試しながら見ていきましょう。

今回はSassに二つある拡張子のうち、もっとも普及している『.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のコンパイルを実行してみます。

①ターミナルで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 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がコンパイルされるまでの一連の流れとなります。

このままではscssファイルを変更するたびにターミナルコマンドを実行しなくてはならないためとても不便です。

実際にSassを利用する場合はコンパイルの自動化を行うのが便利ですので必ず覚えておきましょう。以下で便利なコマンドをいくつか解説します。

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

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

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

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

SassではCSSで使用できる/* */の他に、//で一行のコメントアウトを使用できます。

また//でコメントアウトしたテキストはコンパイル後に表示されない特性を持っています。

// 横一列中央寄せ
// コンパイル後は上記コメントは削除されます
.grid-box {
  display: flex;
  justify-content: center;
}

/* 共通のコンテナ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
      

.grid-box {
  display: flex;
  justify-content: center;
}

/* 共通のコンテナ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
      

変数

$base-color: #666;
$base-space: 15px;

body {
  color: $base-color;
}

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

body {
  color: #666;
}

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

入れ子 (ネスト)

.heading-block {
  padding: 10px 15px;

  .h1 {
    font-size: 20px;
    color: #999;
  }

  p {
    font-size: 14px;
  }
}
      

四則演算

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

.row {
  display: flex;
}

.col-3 {
  width: 33.33333%;
}

.container {
  padding: 10px 15px;
  width: 90%;
}
      

mixin (ミックスイン)

// 引数指定
@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;
}
      

h1 {
  border-bottom: 1px solid #2a0;
}

.block {
  padding: 30px;
  border-bottom: 1px solid #666;
}

.panel {
  color: #666;
  background: #bbb;
  padding: 15px;
}
      

extend (エクステンド)

.box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;

  p {
    line-height: 1.8;
  }
}

.content {
  @extend .box;
  background-color: #eee;
}
      

.box, .content {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.box p, .content p {
  line-height: 1.8;
}

.content {
  background-color: #eee;
}
      

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

%box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.contents {
  @extend %box;
  p {
    line-height: 1.8;
  }
}

.note {
  @extend %box;
}
      

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

.contents p {
  line-height: 1.8;
}
      

ampersand (アンパサンド)

.block {
  width: 960px;

  &-element {
    padding: 10px;

    &:hover {
      text-decoration: underline;
    }

    &-modifier {
      border: #666 solid 1px;
    }
  }
}
      

.block {
  width: 960px;
}

.block-element {
  padding: 10px;
}

.block-element:hover {
  text-decoration: underline;
}

.block-element-modifier {
  border: #666 solid 1px;
}
      

@import (インポート)

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
}
      

@import 'reset';

.block {
  display: block;
}
      

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
}

.block {
  display: block;
}
      

まとめ