【Sass】Sassを導入してみよう
はじめに
どうも、NNCの石上です。
「Sass」という言葉を聞いたことがあるでしょうか。Webサイトを制作するにあたって非常に便利なもの（これ無しではやっていけない程）なのですが、導入・学習コストが高いのではと敬遠される方も少なくありません。
この記事では、まずはSassの概要や魅力、導入方法について学習していきます。その後、基礎編・発展編を経て実務で使いこなすところまでお話ししていければ、と思います。
Sassとは？
「Sass」とは「Syntactically Awesome Style Sheets」の略称で、CSSを拡張したメタ言語のことを指します。ざっくり説明すると、「従来のCSSよりも便利に効率的に記述できる言語 = Sass」という認識になります。
Sassの魅力
「便利に効率的に記述できる」と一言で言われても具体的にどう凄いのかピンと来ないと思いますので、Sassの魅力の幾つかを何点か見てみましょう。
ネスト
親子関係にあるセレクタをネスト（入れ子）にして記述することができます。HTMLの階層構造と合致した形で記述できますし、同じセレクタを複数回書く手間も省くことができます。
<div class="test">
<p>テキスト</p>
</div>.test {
margin: 20px;
p {
font-size: 20px;
}
}ちなみにこれをCSSで書くと以下のようになります。同じセレクタを何回も書くのは手間ですね。
.test {
margin: 20px;
}
.test p {
font-size: 20px;
}変数
プログラミング言語と同じように、「変数」を定義して用いることができます。これにより、同じ値をCSS内のどこでも使いまわすことができるようになります。
$red: #ff0000;
.test {
p {
font-size: 20px;
color: $red;
}
}
.main {
background-color: $red;
}CSSで書くと以下のようになります。いちいちカラーコードをコピペするのはかなり面倒ですね。
.test p {
color: #ff0000;
}
.main {
background-color: #ff0000;
}ミックスイン
よく利用するスタイルを定義しておいて、変数のように使いまわすことができます。
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.main {
@include center;
}
.title {
@include center;
}これをCSSで書くと以下のようになります。大幅に記述量を減らせていますね。
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}パーシャル
複数のSassファイルを一つのSassファイルにインポートすることができます。パーシャル機能でファイルを分割することにより、最終的に読み込むファイル数を抑えつつ、管理・更新のやりやすさを飛躍的に高めることができます。
Sassの導入準備
他にもSass特有の便利な機能はありますが、これらだけでも充分に魅力的かと思います。というわけで早速導入したいのですが、「sassファイルを作成して読み込んで終わり」というわけにはいきません。
Sassには2種類の記法があり、現在では「SCSS記法」と呼ばれるものが主流となっています。このSCSS記法で記述されるSassファイルの拡張子は「.scss」となるのですが、実はこの拡張子のままではブラウザが読み込んでくれません。つまり、「.scss」のファイルを「.css」にコンパイル（＝変換）する必要があるのです。
このコンパイルの手段は幾つかあるのですが、この記事では一番お手軽なPreprosと呼ばれるGUIツールを用いる方法をご紹介します。
まずは公式サイトからダウンロード・インストールを実行してください。
起動すると、画像のような画面が表示されます。Sassを利用したいプロジェクトを、フォルダごとここにドラッグ＆ドロップで引っ張ってきます。あらかじめscssファイルを用意しておくと良いでしょう。
僕は「scss」フォルダの中に「style.scss」というファイルを用意しておいたのですが、それを選択すると画像のように画面右に設定パネルが表示されるかと思います。このパネルの各項目では、以下のような設定が可能です。
OUTPUT PATH：コンパイル先のディレクトリを指定。
Process Automatically：ファイルを保存した際に、自動でコンパイルされる。
Create a Source Map：ソースマップを出力する。
AUTOPREFIXER：ベンダープレフィックスを自動で付与する。
MINIFY-CSS：CSSを1行に圧縮する。
設定が完了したら、コンパイルの準備が整いました。「Process Automatically」にチェックを入れておけば、Sassファイルを保存すると同時にコンパイルされます。（右下にある「Process File」という水色のボタンを押してもCSSファイルへの変換は可能なのですが、非常に面倒ですよね）
一度設定を行えば他のscssファイルにも同様に働きかけてくれるので、ファイルを作成するごとにいちいち設定を行う必要もありません。
というわけで、Sassの導入準備が完了しました。次回から、Sassの基本機能を中心に見ていきたいと思います。
余談
お手軽に試してみたい方は、「SassMesiter」というWebサービスを利用すると良いでしょう。諸々のインストールなど手間を省いて、Sassの使い心地を確かめることができます。
