2016年06月08日
SCSSとは、CSSコーディングを効率化してくれるツールのこと。SCSSの特徴や、基本的な使い方についてまとめました。
SCSS(Sassy SASS)とは、CSSプリプロセッサの一つです。CSSを拡張したメタ言語であるSASSを、よりCSSに近い記法で記述することができます。
具体的な使い方は本記事の後半でご紹介しますが、要はCSSをもっと便利に書くことのできるツールのことです。CSSにはない便利な機能(変数や四則演算、ミックスインなど)を使うこともできるため、効率的にCSSを書いたり管理したりすることができます。
SCSSファイルの拡張子は、「.scss」です。作成したSCSSファイルをコンパイルすると、CSSファイルが生成されます。例えば、「style.scss」ファイルをコンパイルすると「style.css」ファイルが作成されることになります。
SCSSを導入すると、どんなメリットがあるのでしょうか?主なメリットを4つご紹介します。
SCSSを使うと、CSSの記述量が大幅に減らせます。Web制作のコストや工数を減らせるだけでなく、冗長な記述もしなくて済むようになります。
変数や四則演算、ミックスインなどの機能を使うことで、効率的にCSSが書けるようになります。
SCSSを使ってCSSをつくる場合、出力するCSSの記述方式を選択することができます。「nested」、「expanded」「compact」「compressed」の4つです。「compressed」を選択すると、CSSがミニファイされた状態で出力されます。
CSSを効率的に書けるようになるので、余分なコードも書かなくてよくなります。人為的なミスが減るので、バグを減らすことにもつながるでしょう。
SCSSを導入する上でのデメリットについても触れておきましょう。
SCSSはCSSに似た記法を採用しているとは言っても、記述する上でのクセはあります。そのため、SCSSを使いはじめるにはある程度の学習コストを考える必要があります。
CSSの不具合を修正する際は、ChromeのDeveloper ToolsやFirefoxのFirebugなどのブラウザツールを使うかと思います。こういったツールでは、修正すべきCSSの箇所はわかりますが、SCSSの修正箇所まではわかりません。そのため、自力でSCSSの修正箇所を探す必要があります。
ここからは、SCSSの使い方についてご紹介していきます。まずはSCSSのインストールから。
SCSSはRubyで動いています。まずはRubyをインストールして、SCSSを使う準備をしましょう。
※なお、MacにはデフォルトでRubyが入っているのでインストールの必要はありません。
Rubyのインストールができたところで、早速SCSSをインストールしていきましょう。下記のコマンドを実行すればOKです。
$ gem install sass
正常にSCSSがインストールできたか、下記のコマンドで確認しておきましょう。
$ sass --version
バージョン情報が表示されれば、インストールは無事に完了しています。
SCSSのインストールができたところで、実際にCSSファイルを作成してみましょう。手動で出力する方法と、SCSSを監視して自動で出力する方法があります。順にご紹介します。
まずは、手動で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ファイルを出力しましたが、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キー」を同時に押してください。
その他の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にご依頼ください。
「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。