技術部システム開発課の田畑です。よろしくお願いします。
業務の中でSassを使う機会がありましたので、勉強したことをまとめてみたいと思います。
今回学習をすすめるにあたり、以下の本を参考にしました。 基本から書いてありとても分かりやすかったのでおすすめいたします。
Sassとは何か
SassとはSyntactically Awesome Style Sheetsの略です。 日本語に訳すと「構文的に素晴らしいスタイルシート」です。CSSを拡張したメタ言語になります。
公式サイトはこちら
Sassは２種類
SassはSASSとSCSSの２種類の記法があります。
SASSは簡素化された記法です。 SASS記法で書かれたSassファイルの拡張子は「.sass」になります。
SCSSはcssと互換性があり、cssをそのまま書いてもOKなのでとっつきやすく、 SCSSの方が一般的に広まっています。ファイルの拡張子は「.scss」です。
同じ内容をSASSとSCSSで書くと以下のようになります。
SASS
div margin: 0 auto p margin: 5px span color: red
SCSS
div{
margin: 0 auto;
p{
margin: 5px;
span{
color: red;
}
}
}
コンパイルが必要
Sassファイルはそのままではブラウザが認識できないためCSSファイルにコンパイルする必要があります。 以下のような方法があります。
Node.jsとnpmでNodeSassまたはDartSassをインストール
現状多く利用されているのはNodeSassです。 公式サイトのブログ(Sass: LibSass is Deprecated) にあるように、LibSassとその上に構築されたNodeSassを含むパッケージは非推奨になったようです。 これまではNodeSassがメインでしたが今後はDartSassへ移行していくものと思われます。 今回参考にした本(Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト)ではNodeSassのインストールについて書いてあります。
VSCodeの拡張機能を使う
VSCodeの拡張機能で検索するとSassのコンパイラはいくつかあるようでした。「Live Sass Compiler」や「DartJS Sass Compiler and Sass Watcher」などです。現在VSCodeをお使いであれば拡張機能をインストールするだけなのですぐ試せるかと思います。
GUIコンパイラPreprosを使う
黒い画面を使わずに使用できます。画面は英語ですが、直感的に使えるので分かりやすかったです。 今回参考にした本(Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト)で紹介されていました。
他にも色々な方法があるようです。
インストール方法については以下の公式サイトに詳しく紹介されています。
https://sass-lang.com/install
とりあえずSassを触ってみたい方はこちらで試してみてください。(インストールは不要です)
https://www.sassmeister.com/
Sassでできるようになること
Sassを使うと以下のことができるようになります。
- 記述の簡略化ができる
- 専用のコメントが使える
- 同じ値を使い回すことができる
- 一度使ったセレクタを使いまわせる
- コードの再利用が可能
- １つのCSSファイルにまとめることができる
- 条件分岐などのプログラム的な処理ができる
他にも魅力がたくさん
引用：Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト
それぞれの内容についてご説明します。
記述の簡略化ができる
親子関係にあるセレクタをネストして(入れ子にして)書くことができます。
専用のコメントが使える
CSSのコメントやJavaScriptの一行コメントを書くことができます。
/*コメント*/
//コメント
同じ値を使い回すことができる
変数が使えるので同じ値をなんども書かずに済みます。
$main-color:#ccc; $sub-color:#fdbebe;
一度使ったセレクタを使いまわせる
エクステンドという機能で、一度使ったセレクタを使いまわせます。
コードの再利用が可能
ミックスインという機能でスタイルをまとめてテンプレートのように定義できます。
１つのCSSファイルにまとめることができる
パーシャルという機能で、複数のSassファイルをコンパイル時に一つのファイルとして扱えます。
条件分岐などのプログラム的な処理ができる
条件分岐など制御構文が使えます。
@if 条件A { }
@else if 条件B { }
@else 条件B { }
関数で様々な処理を実行できる
Sassには多くの関数が用意されています。条件分岐と組み合わせて複雑なミックスインを作ることもできます。
abs( ) round( )
CSSファイルを圧縮できる
Sassで記述しているときには可読性を重視し、コンパイル時にはインデントや改行をすべて取り除いた軽量版で書き出せます。
Sassで書いてみる
上記で挙がった機能を使って試しにSassで書いてみます。
Sass
$main-color:#ccc; /*変数*/
$sub-color:#fdbebe;
$margin:-20px;
$generalStyle:true;
@if $generalStyle{ /*条件分岐*/
.main{
text-align:center;
}
}
@mixin boxset{
boder:solid 1px blue; /*ミックスイン*/
}
#main{
margin-left:abs($margin); /*関数*/
p{
font-size:1.2em;
@include boxset; /*ミックスイン*/
}
}
.list{margin:0.5em;}
.box{
background-color:$sub-color;
@extend .list; /*エクステンド*/
&__title{
padding:0.5em;
color:$main-color;
}
&__content{
padding:0.5em;
color:$sub-color;
}
}
コンパイルされたCSS
@charset "UTF-8";
/*変数*/
/*条件分岐*/
.main {
text-align: center;
}
#main {
margin-left: 20px;
/*関数*/
}
#main p {
font-size: 1.2em;
boder: solid 1px blue;
/*ミックスイン*/
/*ミックスイン*/
}
.list, .box {
margin: 0.5em;
}
.box {
background-color: #fdbebe;
/*エクステンド*/
}
.box__title {
padding: 0.5em;
color: #ccc;
}
.box__content {
padding: 0.5em;
color: #fdbebe;
}
SassとBEM記法との親和性
以前の記事でBEM記法について書きました。
BEM記法では以下のようなルールでclassを書いていきます。
Block、Element、Modifierのそれぞれの区切りに一貫したセパレーターを使います。
block__element--Modifier
BEMはその特性上同じ記述が繰り返されますが、Sassの機能「ネスト」と「&」を使うことで楽に記述できます。
Sass
.box{
background-color:$sub-color;
&__title{
padding:0.5em;
color:$main-color;
}
&__content{
padding:0.5em;
color:$sub-color;
}
}
コンパイルされたCSS
.box {background-color: #fdbebe;}
.box__title { padding: 0.5em; color: #ccc;}
.box__content { padding: 0.5em; color: #fdbebe;}
上記のように「&」を先頭につけて記述することにより親セレクタが参照されるので、毎回「.box」を書かなくても、コンパイルするとBEM記法へ変換されています。 またblockは同じネストの中に入るので、blockの範囲を把握しやすいという利点もあります。
まとめ
Sassに備わっている機能は色々あり、まだまだ使いこなせていませんが、BEM記法を使っていく中で「ネスト」と「&」だけでもとても便利だと感じています。 CSSで不便だと感じていた部分を補完してくれる機能が備わっているので、今後もSassをうまく使って製作時間短縮や変更に強いCSS作成ができたらと思います。
