sassを使ってみる – Webデザイン学習まとめ

■Sassとは？

Sass(Syntactically Awesome Stylesheets）とはCSSのメタ言語で、簡単にいうとCSSの機能を拡張した高機能版CSSといった感じです。

■Sassを使うメリット

変数などプログラム的な使い方が可能
メンテナンス性が高い
記述量を減らし、データの圧縮が可能

他にも挙げればキリが無いですが、特にCSSが数千行〜1万行くらいになってしまう場合や、頻繁に更新が入るサイトなどには必須と言って良いと思います。
ただ、今までのCSSを全てSassに打ち直すわけではなく、今までのCSSプラスアルファSassの便利な機能を使っていく、という形で良いと思います。

■コンパイルが必要

SassはCSSと違って、そのままではブラウザーが理解出来ないのでコンパイル（変換）する必要があります。rubyを使ってコンパイルするのが一般的ですが、授業では「VS Code」というIDE（統合開発環境）を使って、その場でSassをCSSにコンパイルしながら使っていきます。

marketplace.visualstudio.com

Live Sass Compilerの設定

設定ファイルをいじる事で、コンパイルするCSSファイルの「記述形式」「CSSファイルの拡張子」「CSSファイルの保存場所」等を設定出来ます。

{
　”liveSassCompile.settings.formats”: [
　　{
　　　”format”: “compressed“,
　　　//”format”: “expanded”,
　　　”extensionName”: “.css”, “savePath”: “~/../css”
　　}
　]
}

記述形式は以下の4種類があり、
nested: ネストされた状態
expanded: 手書きに近い
compressed: スペース、改行、コメントを除いた形式に出力する
compact: 読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力

★Compile On Watch（監視開始時にコンパイル）のチェックを外す

Sassの記述方法

SassにはSASS記法(style.sass)とSCSS記法(style.scss)という2つの書き方があります。どちらの記法を使用するかでファイルの拡張子が変わるので注意しましょう。
CSSを習得している人にとってはSCSS記法(style.scss)の方が書きやすいので、授業ではSCSS記法(style.scss)で進めていきます。

HTML

.box {
　background: #000;
　padding:50px;
}
.box>p {
　color: #F00;
}
.box>p>span {
　font-weight: bold;
}

従来のCSS記法

.box {
　background: #000;
　padding:50px;
　p {
　　color: #F00;
　　.box>p>span {
　　　font-weight: bold;
　　}
　}
}

SCSS記法

といったようにネスト状に書いていくのがSCSS記法の特徴です。

ちなみにSASS記法ではセミコロンと括弧が省略出来るためもっとシンプルな形になります。

.box
　background: #000;
　padding:50px;

　p
　　color: #F00;

　　.box>p>span
　　　font-weight: bold;

Scssフォルダーを作り、その中のstyle.scssに必要な記述をしたら保存し、「Watch Sass」というボタンを押しCSSをコンパイルさせます。

今後Sassは必要か？

Sassの登場時期は2006年となっていますが、私の体感では2014~15年辺りから、少しづつ使い始めたような気がします。当時はIE対応というのがまだ必須に近かったので、CSSで出来る事に制限がかかっていました。その代わりにSassで作ってからCSSにコンパイルする、という方法が取られました。
ですが、IEは2013年にIE11がリリースされたのが最後で、2020年に新しいブラウザのEdgeが正式リリースされ、2022年にはIEのサポートが完全終了しました。これをきっかけにCSSに次々に新しい機能が実装され、今では変数や一部の関数、ネストなど、Sassで使用出来た機能がCSSでも使えるようになっています。

参考サイト