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。
慣れてくると使い回せるスタイルを自分で作成できるので、サイトを作れば作るほどストックが増えていきます。よく使うスタイルとしてまとめておけば、さらに時間短縮に。
「Sass」と相性のいい「BEM」の書き方を組み合わせると、メンテナンスしやすいコードになります。こちらもおすすめです。
