CSSのプロパティを覚えて、スタイル指定ができるようになってきたら「Sass（サス）」に挑戦してみましょう。変数や継承によるスタイルの定義で、コーディングの手間が省けるため、生産性も上がりますよ！
例えば、複数箇所で同じスタイルを使う場合、クラス、IDで指定することが多いですよね。一部の設定を利用したいときなどは対策が必要です。該当セレクタごとに打消しのCSSを追加したり、新しいスタイルを用意したり。。これでは入り組んだスタイルシートになりますし、管理自体も難しくなってしまいます。
以上の問題を解決し、学習コストもかからないSassはとてもおすすめです！
目次
Sassとは
Sassとは「Syntactically Awesome StyleSheet」の略で、構文的に素晴らしいスタイルシートと直訳できます。つまり、CSSのようにスタイルを指定できる上、読みやすく、メンテナンス性に優れた構造のスタイルシートだと言えます。
ただし、Sassは「CSSプリプロセッサ（メタ言語）」であり、変数や入れ子構造といったプログラミングに近い形で使われます。このため、CSSファイルに変換するコンパイル作業をしなければ指定したスタイルは適用されません。
また、記述方法も2種類に分かれています。 拡張子が「.sass」のものは、括弧やセミコロンを使わずにインデントや記号で表記していきます。「.scss」はCSSと同じ書き方ができ、セレクタを含む情報を括弧で囲むなどの入れ子にして指定します。
今回は後者である現在主流の「.scss」記法でファイルを作成してきます。
Sassを使うための準備
作業環境・ファイルを整える
使うエディタはVSCodeにしましょう。後々専用の拡張機能を使います。
インストールが完了したら、ワークスペースにフォルダを追加して、HTML、SCSSファイルを用意します。
こちらがHTMLファイルのコードです。SCSSファイルは何も書かなくて大丈夫です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Sassの練習</title> </head> <body> <div> <h2>Sassとは</h2> <h2>Sassを使うための準備</h2> </div> </body> </html>
VSCodeの「Easy Sass」を使う
左下の管理から拡張機能を選びます。
Easy Sassと検索し、該当のツールが出てきたら緑色のInstallアイコンをクリックします。
インストール完了後、こちらのページはタブの×で閉じてください。
Sassでスタイルを指定
それではスタイルを指定していきます。下記の要件で見出しを作成しましょう。
- 見出しはh2。文字色は黒（#000）。フォントは游ゴシック。
- 見出しの背景色は灰（ #f5f5f5 ）。上下左右10pxの余白。
- 前に5pxの縦ボーダー。色は青（ #00008b ）。
入力完了後はCtrl+Sで保存してください。CSSファイルと圧縮されたCSSファイルが自動で保存されます。
Scssのコードはこちらです。一例なので、全て同じである必要はありません。
$font-color: #000;
$font-family: Yu Gothic;
@mixin box{
padding: 10px;
margin-bottom: 10px;
border-left: solid 5px #00008b;
background-color: #f5f5f5;
}
div{
h2{
color: $font-color;
font-family: $font-family;
@include box;
}
}
ブラウザで確認すると、このようになります。
Sassの便利機能
変数
例で指定した$font-color、$font-familyの2つが変数にあたります。頭文字に「$」をつけて任意の文字列で命名すると独自の変数となり、CSSプロパティの値として利用できます。
これにより、よく使う色やサイズを一括管理できるので、変数で指定したプロパティを一度に変更したいときにとても便利な機能です。
@mixinと@include
例のような@mixin boxがスタイルを定義している部分です。何度も使いたいスタイルを指定して、変数と同じように呼び出すことができます。
指定するときは@mixinを使い、呼び出すときは@includeをそれぞれ使います。変数と異なり、セレクタ {プロパティ名：値；}という書き方はせず、スペースを挟んで定義した文字列を記載します。
@mixin、@includeと似た@extendの方法もあります。当記事の冒頭でお話した、クラスやIDを新規で作ることなく一部を継承し、適用したいCSSを追記する手法です。
@import
今回は一例に登場しませんでしたが、他のSassファイルを読み込むときに使う記述になります。@importは、CSSと同じようにSassでも使うことができます。
内容に応じてCSSを分割し、必要なスタイルシート間で共有できれば、エラーが見つけやすくなりますし、メンテナンスしやすいメリットがあります。Sass自体管理しやすいスタイルシートとして普及していますから、合わせて使うことをおすすめします。
Sassをコンパイルできるツール
Koala
Koalaは、事前にRubyのインストールが必要になります（Macは不要）。今回のEasy Sassのように自動でコンパイルしてくれる、フリーのGUIコンパイラです。コマンドラインからの操作ではないので、初心者にも使いやすいソフトでしょう。
Prepros
Preprosは、同じくフリーで使えるGUIコンパイラです。購入は$29とありますが、無料で使えるので安心してください。コンパイル方法はKoalaと大きく変わらず、ドラッグ&ドロップでOK。ライブプレビュー機能もあるので、VSCodeの代用に使うこともできますよ。
Sass Meister
Sass Meisterは、KoalaやPreprosと異なるオンラインツールです。左のボックスにSassのコードを入力すると、右のボックスにCSSで出力されます。Viewのボタンで画面を縦横に分割でき、追加したHTML用のボックスを使って実際にプレビューも可能です。
今回はVSCodeを利用したSassの使い方について学びました。既にHTML、CSSを理解している方は、Sass独自のルールを覚えるだけでOK！
書き始めは機能を調べながらのコーディングになるので、少し時間がかかるかもしれません。ただ、慣れてくると使い回せるスタイルを自身で作成できるので、サイトを作れば作るほどストックが増えていきます。よく使うスタイルとしてまとめておくと、さらに時間短縮になりますよ！
