Scssとは？Scssの使い方・書き方をマスターしてCSSへコンパイル変換
Scss（Sass）はCSSを効率よくコントロールするためにRubyで作られたメタ言語です。
Scssでは変数や入れ子などを駆使できるため、一括管理・一括変更が簡単でコーディングの手間が簡略できます。
コードを書くにはRubyとSassそしてCSSに出力するコンパイルソフトが必要です。
Scss（Sass）使っていますか？
あなたはCSSを書く際、Scss（Sass）を使っていますか。
未だにCSSコードを直接たくさん書き込んでいらっしゃる人もいるのではないでしょうか。
「毎回どこにどのように記述してあって、どこを書き換えをすれば良いのか」
CSSの量が多くなると、上記を把握するまでに毎回手間が掛かりますよね。
特に他人が記述したCSSほど難解な事はありません。
これからはScssを使っていきましょう。
CSSはいつの間にか、その本文である「シンプルで効率よく」とかけ離れた道を進んでいるのです。
であればこれからは、このScss（Sass）を使ってCSSを書くようにしましょう。
最初の環境を整えてやり方を覚えれば、CSSの管理が非常に簡単になります。
CSSは徐々に肥大していく傾向に
小規模のWEBサイトであれば、それほどCSSのコーディングに問題を感じる事はないかも知れません。
ですがサイトの規模が大きくなるとそれに応じてCSSが肥大し、その記述管理の手間が煩雑になる傾向にあるのです。
私自身もコードを書き換える箇所の多さに嫌気がさす事が今までたくさんありましたので、Scssを利用する様になりました。
Sassとは
Sassは「Syntactically Awesome Style Sheets」の略で、CSSに変換コンパイルするために使うRuby製メタ言語です。
※「構造的に最高で・素晴らしいスタイルシート」の意
もっと快適にCSSコーディングがしていける様、その効率性の向上を目的として作られたものです。
CSSファイルを生成するためのメタ言語
メタ言語とは「ある言語を生成するための言語」ですので、Sassは「CSSファイルを生成するための言語」という事になります。
CSSを書く上で起きやすい、その記述量が増えるにつれ設定が複雑になってしまう問題に焦点を当てています。
常にわかりやすくシンプルに書けるところがSassの一番の特徴となります。
本記事ではこの効率的でシンプルな管理が可能とされるSassをまだ使った事が無い人のために、その書き方や導入方法をご紹介します。
SassとScssの違い
Sassには「Sass」と「Scss」という2種類の記述方法があります。両社はそれぞれに書き方が違うのですね。
元々はSass記法のみだったのですが、CSSライクな記述法から少し離れていました。
ですのでよりCSSとの互換性を高めるため、Scssの記法が後から作られたという経緯があります。
SassとScssの文法の違い
Sassの文法
ul.red margin: 2em 0 li.tl text-align: left
Scssの文法
ul.red{ margin: 2em 0 li.tl{ text-align: left } }
Scssは上記の様に入れ子構造にする記述ができるため、現在はScss記述の方が主流になっています。
さらにScssの場合は本来の書き方とは別に、通常通りのCSSの書き方が可能です。
ですのでCSSを理解している人であれば問題はあまりないため敷居が低く、Scssの方が一般的に使用されています。
拡張子に注意
ScssとSassは拡張子がそれぞれ違います。
Scssの拡張子は「.scss」
Sassの拡張子は「.sass」
Sassとして使いたい場合は拡張子を.sassに変えれば問題はありません。
ここからは、Scssの方に焦点を当ててお話を進めます。
Scssの導入方法
ではまずはどのようにすればこのScssを利用する事ができるようになるのでしょう。
単に拡張子を「.scss」に変更しただけではこの「Ruby」で作られたScssのコーディングをする事はできません。
Scss（Sass）は本来「コマンドラインソフト」ですので、基本的にはコマンドを打つものになります。
Scssは先述の様にRubyで書かれているプログラムですので、動かすためにはまずRubyをインストールする必要があります。
Rubyをインストールする
PCでMacを使っている方は、標準でRubyがインストールされているのでこの作業は不要です。
Windowsを利用している方は配布サイトからRubyをダウンロードしましょう。
PCの環境によってダウンロードをするファイルが異なりますので、使用するPCの仕様バージョンを確認して下さい。
Rubyの公式ダウンロードページ：Ruby
Sassをインストールする
次にSassを使えるようにします。
インストール方法
Macの場合はターミナルを使ってSassをインストール
Windowsの場合は「RubyGemsシステム」を使います
コマンドプロンプトから「gem install Sass」と実行してSaasをインストールします。
コマンドによりSassがインストールされたことを確認しましょう。
Ruby・Sassのダウンロード参考記事
コンパイラをインストールする
Sassで記述したコードはメタ言語なので、そのままでは使う事ができません。
GUIソフトなどをインストールしてCSSとして動くように変換（コンパイル）をしなければいけないのです。
次項でコンパイルできるソフトをいくつかご紹介します（他にもたくさんあります）。
おすすめコンパイル（GUI）ソフト
Macの場合「Codekit」
Macユーザーならオススメのソフトです。
Sassだけでなく、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、Compassなどさまざまなメタ言語を自動でコンパイルしてくれます。
【ダウンロード先】：Codekit
MacとWindowsの両方対応なら「Koala」
機能も豊富で、MacとWindowsのどちらでも使えるので人気ですね。
【ダウンロード先】：Koala
Koalaコンパイルソフトのインストール・操作の詳細はこちら
フリーソフト「Scout」
WindowsとMacのどっちでも動くフリーソフトです。
通常のコンパイルには十分ですが、ちょっと機能不足な面もあるようです。
【ダウンロード先】：scout-app
手動でもコンパイル可能
コマンドラインから手動コンパイル操作もできます。
「Sass style.Scss:style.css」
「Sass --watch style.Scss:style.css」
のように自動的にコンパイルするように設定する方法もあります。
アウトプット（コンパイル出力）時のスタイルについて
コンパイル時には4種の出力形式から選ぶ事ができます。
「sass --style 〇〇〇 --watch…」と指定します。
| 用途 | アウトプットのスタイルを指定する |
|---|---|
| 書式 | sass --style スタイル名 |
| 用例 | sass --style expanded --watch style.Scss:style.css sass --style compressed --watch style.Scss:style.css |
nested（入れ子型、デフォルト）
.container { background-color: red; } .container .spanb { background-color: blue; } .container .spano { background-color: orange; }
expanded（展開型）
.container { background-color: red; } .container .spanb { background-color: blue; } .container .spano { background-color: orange; }
compact（一行型）
.container { background-color: red; } .container .spanb { background-color: blue; } .container .spano { background-color: orange; }
compressed（圧縮型、最終出力型）
.container{background-color:red}.container .spanb{background-color:blue}.container .spano{background-color:orange}
以上の感じで、CSSにコンパイルした時の出力表記が変わります。通常は「expanded」が普通の状態ですね。
Scssの基本的な機能
Scssは通常のCSSとどのように違うのでしょうか。
それはズバリ、「入れ子」構造や変数定義・関数コード化などの機能が使える事に他なりません。
「何度も同じ記述を使いまわしたり、変数定義などができれば良いな」
前々からあったこの様なCSSへの要望に対し、Sassはphpプログラムの様なコードを記述できるのです。
ネスト（入れ子構造）
セレクタの入れ子の使い方
Scssコード
.container{ background-color: red; .span_p{ background-color: pink; } .span_or{ background-color: orange; } }
CSS出力（コンパイル）後
.container { background-color: red; } .container .span_p { background-color: pink; } .container .span_or { background-color: orange; }
下記の出力を全て手書きするよりも、上のScssのように書けた方が簡単ですよね。一番わかりやすい事例だと思います。
セレクタ以外にプロパティの入れ子もできます。
プロパティの入れ子
Scssコード
p{ background: { color: red; image: url('image/test.jpg'); repeat: repeat-x; } }
CSS出力（コンパイル）後
p { background-color: red; background-image: url("image/test.jpg"); background-repeat: repeat-x; }
「&」親セレクタ
「&」（アンパサンド）は親参照セレクタと呼ばれ、擬似要素・擬似クラスや複数クラスなどで使います。
親参照セレクタの使い方
Scssコード
a { color: #ccc; &.wrap { color: #fff; } &:hover { text-decoration: none; } }
CSS出力（コンパイル）後
a { color: #ccc; } a.wrap { color: #fff; } a:hover { text-decoration: none; }
この「&」要素は直前の親要素自身を指すので、以下のようにも使えます。
Scssコード
section { color: #fff; #wrap & { font-weight: bold; } }
CSS出力（コンパイル）後
section { color: #fff; } #wrap section { font-weight: bold; }
関連のCSSを1箇所にまとめて記述できるので、何度も同じ親セレクタを書くことがなくなりますよね。
一箇所を見直せばすぐに反映ができるので見通しが良くなり、メンテナンスも簡単になります。
変数定義
Scssでは変数が使えるようになっており、この書き方もphpに近いフォーマットです。
$変数名: 値;
値にはCSSで使える単位なら何でもOKです。
Scssコード
$your-red:#cc0000; $test:500px; a{ color: $your-red; width: $test + 200px; /* 四則演算も可能 */ }
CSS出力（コンパイル）後
a { color: #cc0000; width: 700px; }
同じ値が複数の箇所で共有して使われる場合には特に便利ですね。
修正が必要な場合に1箇所だけ直せば、その変数が使われている全ての箇所にも反映する訳です。
この辺りはphpプログラムなどとそっくりです。
Mixinによる関数コード化
MixinはSassで最も重要な機能と言っても過言ではない部分ですね。
Mixinは小さなコードテンプレートみたいなもので、関数として呼び出す事で大幅なコード量削減になります。
Mixinの使い方
@mixinでテンプレートコードを関数化し、@includeで関数名を呼び出しします。
Scssコード
@mixin btn-style{ border: 1px solid #b8b8b8; border-radius: 5px; background-color: #c9c9c9; } .btn-blue{ @include btn-style; color: blue; } @mixin my-color($color){ @include btn-style; color:$color; } .btn-red{ @include my-color(red); }
最後の部分は（）内の引数を渡している例ですね。
CSS出力（コンパイル）後
btn-blue { border: 1px solid #b8b8b8; border-radius: 5px; background-color: #c9c9c9; color: blue; } .btn-red { border: 1px solid #b8b8b8; border-radius: 5px; background-color: #c9c9c9; color: red; }
セレクタの継承
セレクタの継承とは、あるセレクタの内容をそのまま違うセレクタに適用することができる事を意味しています。
@extendを使ったスタイル継承の仕方
Scssコード
.p_1{ background-color: gray; color: red; } .p_2{ @extend .p_1; border: 1px solid white; }
.p_1のスタイルをそのまま引っ張ってきて、それに加えて独自スタイルを書く例です。
CSS出力（コンパイル）後
.p_1, .p_2 { background-color: gray; color: red; } .p_2 { border: 1px solid white; }
その他の機能
コメント
通常CSSではコメントを「/* */」と入力しますよね。Scssではればphpの様に「//」でコメントを書き始める事ができます。
さらにコメントはコンパイル時に表示・非表示を選ぶことができます。
エクスクラメーションマーク「！」を付ける事で表示させるコメント・させないコメントを分ける事もできるのです。
インポート機能
1つのScssファイルで全てのスタイルを書いていくと記述量が膨大になります。
そんな時「@import」を使う事で特定のファイル（CSSかScss）の中身をそのまま持ってくる事ができます。
様々なジャンルに分けたScssファイルを読み込むことができるので、長々とScssを書かずに済みますよね。
本来「コードが長くならないようにScssを利用する」というのが主旨ですから、つらつらと書いていては本末転倒です。
Pertialについて
複数のファイルに分けた読込用のScssファイルの事をpartial（パーシャル）と言います。
パーシャルするScssファイルの名前の頭には「_」（アンダーバー）を付けるルールです。
「_」のついたファイルは、ScssからCSSにコンパイルする時に個別のCSSファイルとして出力させない制限が掛かります。
単純にインポートだけのために使うという事ですね。
Pertialファイルのインポート
_aaa.scss
_bbb.scss
@importでPartialをインポートする場合には、「_」は含めずに記述をします。
@import "aaa";
@import "../bbb";
拡張子も自動判別してくれるので記述する必要はありません。
Scssをより便利にするCompass
CompassはScssを使ったオープンソースのCSSオーサリングフレームワークでScssをさらに便利にしてくれるパッケージです。
CSSに対する「bootstrap」のように、Scssにおいて必須の機能を前もって取り揃えてくれている感じに近いと思います。
いわゆるScssの拡張パックみたいなもので、別途導入が必要です。
Compassの利用方法
下記の様にインポートする事で利用できます。
@import "compass";（拡張子省略）
リセットCSSやCSS3のブラウザ互換性対応、角丸やドロップシャドウ、グラデーション背景などなど、色々なものが用意されています。
Compassダウンロード：Compass Core Framework
Compassについてはまた別記事にて紹介します。
Scssもテンプレートの一部
海外テンプレートには、Scssファイルが同梱されてる場合がある
海外サイトテンプレートなどを購入した時に、CSSファイルと一緒にScssがセットで同梱されている場合があります。
つまりScssファイルを利用する事ができるのですね。それはそのテンプレートのCSS自体がScssにて構成されている事も意味しています。
.mapファイル（ソースマップ）も入っている場合あり
さらにScssが同梱されている場合、拡張子が「.map」となっているマップファイルも入っている事が多いです。
これはソースマップと呼ばれるもので、「.map」ファイルには実際にCSSの出力に使っているファイル（複数）の位置が書かれています。
コマンドラインでコンパイルを実行した場合は、デフォルトで「.css.map」の拡張子ファイルが自動作成されます。
Chromeでのデバックの時に便利
Google Chromeのディベロッパーツールを使っている時に、このソースマップがあると大変便利です。
その該当箇所の設定が、「元のscssファイルの何行目の設定なのか」ということを伝えてくれるのです。
CSSファイルではなくScssファイルの位置を教えてくれています。
ソースマップがあればコンパイル元のScssファイルの修正箇所がすぐに分かるという訳ですね。
ただしGUIツールを使ってコンパイルした場合は、デフォルトでこのソースマップが出力されない場合もありますので注意です。
Scssを使うメリット・デメリットをおさらい
メリット
コーディングする行数が減る
入れ子構造を採用でいるので、スタイルシート構造が見やすくなる
変数を使えるので共通スタイルの一括変更が楽になる
mixinで一度書いたコードを使いまわせる
デメリット
導入のための開発環境を用意する必要がある
記法を覚える必要がある
Scssファイルではそのまま使えないのでコンパイルする必要がある
まとめ
今回ご紹介した機能はScss機能のほんの一部です。
全ての機能を使いこなすのは確かに難しいとは思います。
しかし今回ご紹介した機能を使いこなすだけでも、CSSを直接書いていた時と比べれば格段に作業が効率的になりますよね。
それはひいてはWEBサイト制作時から運用時に渡り長期的な運営メリットを生むことになります。
特に規模の大きいWEBサイトを制作するケースでこのSassの本領は発揮されるとは思います。
しかし、まずは小規模のWEBサイトでこのScssをテスト導入してみるのが良いのではないでしょうか。
cssで直接CSSを記述することが可能なので、未経験者でもScssへシフトがしやすいのは間違いありません。
WEBサイト制作において作業の効率化は非常に重要な生命線ですので、この機会にScssに触れてみてはいかがでしょうか。
