2019/2 Sass入門
生のCSSを書くより便利なSassについて紹介します。
Sassとは
CSSの生産性を上げてくれるスタイルシート言語、及び、ツールを意味します。 利用イメージとしては、
- Sass記法でコーディングしたscssファイルをビルドする
- ビルドするとCSSファイルが生成される
- 生成されたCSSを今まで同様にHTMLに読み込ませる
という流れになります。
ちなみにSaaS(Software as a Service)とは略称が似ていますが違います。
なぜSassなのか？
CSSはデザイン表現する上でとても強力な言語ですが 通常の開発言語ほどプログラマブルではありません。 そのためべた書きになり、コード量が増えてくると途端に破綻します。
Sassでは以下のような記述ができるため メンテナンス性が大幅に向上します。
- ネスト(入れ子)が表現できる
- ファイル分割できる
- 変数定義ができる
ネスト
/* CSSの場合 */
.cs-main {background-color: #FFF;}
.cs-main .cs-area {height: 100%;}
.cs-main .cs-area .cs-dummy {display: none}
不用意に影響がでないようにセレクタ条件を限定した場合、CSSだとどうしても冗長になります。 しかしSassだと以下のように記述できるので、記述量は減るし可読性もぐっと上がります。
// Sassの場合
.cs-main{
background-color: #FFF;
.cs-area{
height: 100%;
.cs-dummy{
display: none
}
}
}
あとSassだとコメントも//で書けるので、地味にメンテナンス性が上がりますね。
ファイル分割
コード量が増えると、パーツやモジュール・ページ単位でファイルを分けたくなります。 しかし、通常CSSファイルを分割すると、ファイル毎にHTTP通信が発生するためパフォーマンスを損ねます。
Sassでは下記のようにすることで、ビルド時にscssファイルを結合して1ファイルのCSSとして出力してくれるので、 パフォーマンスを損ねることなくメンテナンス性が向上します。
インポート用ファイルを例えば「_tablet.scss」というファイル名で用意する。（先頭にアンダーバーを付ける）
// _tablet.scss
.cs-tablet{
.cs-contents{
max-width: 800px;
}
}
インポートの仕方は、例えばmain.scssファイルの先頭などに
// main.scss
@import “tablet”
// メインコンテンツ
.cs-main{
background-color: #efefef;
border-radius: 3px;
}
と記述すればインポートされます。（アンダーバー＆拡張子なし）
変数定義
// 定義
$base-color: #F0F;
$accent-color: #FFF;
$back-color: #123456;
$font-size-S: 1.1rem;
$font-size-M: 1.3rem;
$font-size-L: 1.5rem;
// 利用
.cs-main{
background-color: $back-color;
.cs-title{
background-color: $accent-color;
font-size: $font-size-L;
}
}
このようにカラーやフォントサイズを1か所で定義できます。 これで値を変えるた���に、CSS全置換することもありません。
このように、Sass記法といってもCSS記法の延長線上なので習得するの簡単です。なんならCSS記法のままでも使えるのでファイルの拡張子を.cssから.scssにリネームするだけでも始められるので、既存のCSSから移行しても大丈夫です。
また、mixinといって関数(プログラム)的な機能もあるのですが、複雑になり後からメンテナンスしにくくなったので個人的にはあまりおすすめしません。 紹介した上記３つの機能を使うぐらいがちょうど良いと思います。