コンパイルが必要
Sassはcssと違って、そのままではブラウザーが理解出来ないのでコンパイル(変換)する必要があります。rubyを使ってコンパイルするのが一般的ですが、授業では「VS Code」というIDE(統合開発環境)を使って、その場でSassをcssにコンパイルしながら使っていきます。
Live Sass Compilerの設定
設定ファイルをいじる事で、コンパイルするcssファイルの「記述形式」「cssファイルの拡張子」「cssファイルの保存場所」等を設定出来ます。
{ "liveSassCompile.settings.formats": [ { "format": "compressed", //"format": "expanded", "extensionName": ".css", "savePath": "~/../css" } ] }
記述形式は以下の4種類があり、
- nested: ネストされた状態
- expanded: 手書きに近い
- compressed: スペース、改行、コメントを除いた形式に出力する
- compact: 読みやすさをある程度保持しつつデータサイズが小さくなるような形で出力
Sassの記述方法
SassにはSASS記法(style.sass)とSCSS記法(style.scss)という2つの書き方があります。どちらの記法を使用するかでファイルの拡張子が変わるので注意しましょう。
cssを習得している人にとってはSCSS記法(style.scss)の方が書きやすいので、授業ではSCSS記法(style.scss)で進めていきます。
HTML
<div class="box"> <p>初めての<span>Sass</span></p> </div>
従来のcss記法
.box { background: #000; padding:50px; } .box>p { color: #F00; } .box>p>span { font-weight: bold; }
SCSS記法
.box { background: #000; padding:50px; p { color: #F00; .box>p>span { font-weight: bold; } } }
といったようにネスト状に書いていくのがSCSS記法の特徴です。
今後Sassは必要か?
Sassの登場時期は2006年となっていますが、私の体感では2014~15年辺りから、少しづつ使い始めたような気がします。当時はIE対応というのがまだ必須に近かったので、CSSで出来る事に制限がかかっていました。その代わりにSassで作ってからCSSにコンパイルする、という方法が取られました。
ですが、IEは2013年にIE11がリリースされたのが最後で、2020年に新しいブラウザのEdgeが正式リリースされ、2022年にはIEのサポートが完全終了しました。これをきっかけにCSSに次々に新しい機能が実装され、今では変数や一部の関数、ネストなど、Sassで使用出来た機能がCSSでも使えるようになっています。