CSSコーディングを効率化する！SCSSの特徴と基本的な使い方

2016年06月08日

SCSSとは、CSSコーディングを効率化してくれるツールのこと。SCSSの特徴や、基本的な使い方についてまとめました。

SCSSの基礎知識

SCSSとは？

SCSS（Sassy SASS）とは、CSSプリプロセッサの一つです。CSSを拡張したメタ言語であるSASSを、よりCSSに近い記法で記述することができます。

具体的な使い方は本記事の後半でご紹介しますが、要はCSSをもっと便利に書くことのできるツールのことです。CSSにはない便利な機能（変数や四則演算、ミックスインなど）を使うこともできるため、効率的にCSSを書いたり管理したりすることができます。

SCSSファイルの拡張子は、「.scss」です。作成したSCSSファイルをコンパイルすると、CSSファイルが生成されます。例えば、「style.scss」ファイルをコンパイルすると「style.css」ファイルが作成されることになります。

SCSSのメリット

SCSSを導入すると、どんなメリットがあるのでしょうか？主なメリットを4つご紹介します。

CSSの記述量が大幅に減る

SCSSを使うと、CSSの記述量が大幅に減らせます。Web制作のコストや工数を減らせるだけでなく、冗長な記述もしなくて済むようになります。

効率的にCSSが書ける

変数や四則演算、ミックスインなどの機能を使うことで、効率的にCSSが書けるようになります。

出力するCSSの記述が選択できる

SCSSを使ってCSSをつくる場合、出力するCSSの記述方式を選択することができます。「nested」、「expanded」「compact」「compressed」の4つです。「compressed」を選択すると、CSSがミニファイされた状態で出力されます。

バグが減らせる

CSSを効率的に書けるようになるので、余分なコードも書かなくてよくなります。人為的なミスが減るので、バグを減らすことにもつながるでしょう。

SCSSのデメリット

SCSSを導入する上でのデメリットについても触れておきましょう。

学習コストが必要

SCSSはCSSに似た記法を採用しているとは言っても、記述する上でのクセはあります。そのため、SCSSを使いはじめるにはある程度の学習コストを考える必要があります。

修正箇所がわかりづらい

CSSの不具合を修正する際は、ChromeのDeveloper ToolsやFirefoxのFirebugなどのブラウザツールを使うかと思います。こういったツールでは、修正すべきCSSの箇所はわかりますが、SCSSの修正箇所まではわかりません。そのため、自力でSCSSの修正箇所を探す必要があります。

SCSSの使い方

ここからは、SCSSの使い方についてご紹介していきます。まずはSCSSのインストールから。

SCSSのインストール

Rubyをインストールする

SCSSはRubyで動いています。まずはRubyをインストールして、SCSSを使う準備をしましょう。

※なお、MacにはデフォルトでRubyが入っているのでインストールの必要はありません。

SCSSをインストールする

Rubyのインストールができたところで、早速SCSSをインストールしていきましょう。下記のコマンドを実行すればOKです。

$ gem install sass

正常にSCSSがインストールできたか、下記のコマンドで確認しておきましょう。

$ sass --version

バージョン情報が表示されれば、インストールは無事に完了しています。

SCSSの使い方（CSSの出力）

SCSSのインストールができたところで、実際にCSSファイルを作成してみましょう。手動で出力する方法と、SCSSを監視して自動で出力する方法があります。順にご紹介します。

CSSファイルを出力する（手動）

まずは、手動でCSSファイルを出力する方法から。下記のようなコードを含むSCSSファイル（test.scss）を、試しに用意しました。

#main {
    width: 980px;
    p {
        margin: 0;
    }
}

カレントディレクトリに移動した上で、ターミナル（コマンドプロンプト）で下記のコマンドを実行。SCSSファイルをコンパイルします。

$ sass test.scss:test.css

これで、下記のコードが記述されたCSSファイルがSCSSと同一のディレクトリに作成されるはずです。

#main {
  width: 980px; }
  #main p {
    margin: 0; }

SCSSの使い方は以上です。インストールさえできていれば、使い方そのものは簡単ですね。

CSSファイルを出力する（自動）

先ほどはコマンドラインから手動でCSSファイルを出力しましたが、SCSSファイルを監視させることも可能です。下記のようなコマンドを実行すれば、指定したSCSSファイルが更新された場合、自動でCSSファイルが出力されます。

$ sass --watch test.scss:test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.

ディレクトリごとに監視する場合は、下記のように指定します。SCSSファイルが複数ある場合に使うといいでしょう。

$ sass --watch _scss

監視状態を止める場合は、「Ctrlキー + Cキー」を同時に押してください。

その他の使い方

出力するCSSのスタイル

その他のSCSSコマンドについても見ていきましょう。まずはCSSのスタイルから。CSSを出力する時に、下記のオプションを追加するとCSSのスタイルが任意に指定できます。

$ sass test.scss:test.css --style nested

上述したように、CSSのスタイルは「nested」、「expanded」「compact」「compressed」の4種類があります。それぞれの結果は、下記のようになります。

#main {
  width: 980px; }
  #main p {
    margin: 0; }

#main {
  width: 980px;
}
#main p {
  margin: 0;
}

#main { width: 980px; }
#main p { margin: 0; }

#main{width:980px}#main p{margin:0}

キャッシュフォルダを作成しない

SCSSを使っていると、「.sass-cache」というフォルダが自動で作成されていることがわかります。キャッシュ（cache）という名前からわかるように、一時的な情報が保存されているのですが、不要な場合はこれを作成させないこともできます。

SCSSをコンパイルするときに、下記のコマンドを実行することでキャッシュフォルダが作成されなくなります。

$ sass test.scss:test.css ---no-cache

あとがき

SCSSの特徴や基本的な使い方についてご紹介しました。CompassなどSCSSを便利に使うツールもあるので、上手に活用していきましょう。

制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！