この投稿を読んでわかること
- Sassとは
- CSSとの違いは
- コンパイルの仕方
- どんな時にSassを用いるのか
コンパイルって言葉も覚えにくけりゃ、作業もむずい
やっとhtml/cssを乗り越えた初心者にしてみれば、JavaScriptも大変なのに、チーム開発のあれこれ（FLOCSSやらBEMやらGitやら）も本当に難しいんですよ…
やっとこさ乗り越えたので、備忘録的に書いていきます。
Sassってなんぞや
Syntactically Awesome StyleSheetの略。
（構文的に超すごいスタイルシート）
CSSを拡張したメタ言語で、CSSのコード記述をより効率的にかつ可読性を高めるためのツールをSassと言います。
記述法は2つ
Sassは「SASS」という記法と「SCSS」という記法の2つが存在します。
SASS：インデントベースの構文を使用し、ブレース（{}）やセミコロン（;）を省略できる。
$primary-color: #333
body
color: $primary-color
h1
font-size: 2em
見た目は簡潔で見やすいですね。続いて、SCSSについて。
SCSS：CSSに非常に似た構文で、ブレースとセミコロンを使用する。
$primary-color: #333;
body {
color: $primary-color;
}
h1 {
font-size: 2em;
}
書き方はCSSと同じです。
他にも違いがあり、それを説明するためには、まずSassの特徴について説明する必要があります。
Sassの特徴
Sassの特徴
①ネスト（入れ子構造）によって記述を簡略化できる
②変数が利用できる
③ミックスイン（@mixin）が利用できる
④ファイル分割をすることができる
①ネスト（入れ子構造）によって記述を簡略化できる
これは親子関係がわかりやすい記載ができるということです。どういう意味か、実際のコードで説明します。
というhtmlがあったとき、CSSは以下のように指定していきます。
nav ul {
display:flex;
gap: 10px;
}
nav ul li {
color:#333333;
padding:20px;
}
nav ul li a {
text-decoration:none;
}
これらをSASS、SCSSの記法でそれぞれ記述すると、下記のようになります。
/*SASS記法*/
nav
ul
display:flex
gap: 10px
li
color:#333333
padding:20px
a
text-decoration:none
/*SCSS記法*/
nav {
ul {
display:flex;
gap: 10px;
}
li {
color:#333333;
padding:20px;
}
a {
text-decoration:none;
}
}
インデントがあるので、どの入れ子なのかがパッと見てわかるような記述ができます。
②変数が利用できる
CSSと大きく異なるのは変数が利用できることです。これを画面サイズの指定や、色の指定に使うことによって、記載が簡略化されたり、変更が容易になります。
/*SCSS記法(色の指定)*/
$main-color: #3498db;
$padding: 20px;
.button {
background-color: $main-color;
padding: $padding;
color: white;
}
/*ブランドカラーを固定している時などは使い勝手がいいシステム*/
/*SCSS記法(サイズの指定)*/
$screen: mobile;
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
.container {
@if $screen == mobile {
@media (max-width: $breakpoint-mobile) {
background: lightblue;
}
} @else if $screen == tablet {
@media (max-width: $breakpoint-tablet) {
background: lightgreen;
}
} @else {
background: white;
}
}
/*ブレークポイントも変数化でき、@ifを用いることで画面サイズに応じたスタイル分岐も可能*/
③ミックスイン（@mixin）が利用できる
よく使うスタイルのテンプレート（ひな型）を定義できる機能。
引数を使って柔軟に値を変更することができます。
@mixin button-style($bg-color, $text-color) {
padding: 10px 20px;
background-color: $bg-color;
color: $text-color;
border: none;
border-radius: 5px;
}
.btn-primary {
@include button-style(#3498db, white);
}
.btn-secondary {
@include button-style(#95a5a6, black);
}
よく使われる項目：「ボタンのスタイル」や「共通の枠・影・間隔」
④ファイル分割をすることができる
CSSは基本的に、style.cssにのみスタイルを記載していきます。
Sassはこの後説明するコンパイルによって、scssファイルを分割しても1つのstyle.cssに変換してくれるので、以下の例のように、ファイルを分割して記載することができます。
//構造
scss/
├── _variables.scss // 色・余白などの変数定義
├── _mixins.scss // ミックスイン定義
├── _reset.scss // リセットCSS
├── _header.scss // ヘッダーのスタイル
├── _footer.scss // フッターのスタイル
├── _buttons.scss // ボタンスタイル
└── main.scss // 上記すべてを読み込む中心ファイル
//main.scssに以下を記載することで、分割しても1つのcssに変換ができる
@use 'variables';
@use 'mixins';
@use 'reset';
@use 'header';
@use 'footer';
@use 'buttons';
FLOCSSなどの設計と組み合わせることで、保守性の高い設計を作ることができる。
役割ごとにファイルを分割することで、修正がしやすくなったり、更新時の影響範囲が狭まるので、テストや確認がしやすい。
コンパイルの仕方
先ほどコンパイルという言葉が出てきましたが、どういう意味でしょうか。
コンパイル
scssファイルをcssファイルに変換する作業のこと。
コンパイルの仕方は
- Live Sass Compiler（個人・小規模開発向け簡易版）
- Dart Sass
の2つが存在する。
Live Sass Compiler
VSCodeに入れる拡張機能で、設定を行った後コーディングしていると、リアルタイムでCSSに変えてくれる。
設定の流れ
１、VScodeの拡張機能から「Live Sass Compiler（Glenn Marks）」をダウンロードする
２、 .vscode/settings.jsonに下記を記載する
※やり方
作業ディレクトリの中に.vscodeディレクトリを作る
cmd+Shift+Pで開いた画面からPreferences: Open User Settings(JSON)を探して開く
下記を記載する
ファイル→名前をつけて保存→.vscodeディレクトリに保存する
settings.json
{
"workbench.colorTheme": "Visual Studio Dark - C++",
"editor.formatOnSave": true,
"diffEditor.ignoreTrimWhitespace": false,
//以下を記載する
"liveSassCompile.settings.formats": [
{
"format": "expanded", //出力形式（きれいに整形）
"extensionName": ".min.css",// 出力ファイルの拡張子
"savePath": "/asset/css" // 出力先のフォルダ
}
]
}
POINT 元々記載されている{}内に追記すること
Dart Sass
Sass公式が出している本物の変換ツールで、会社やチームで開発するときによく使う。
コマンドを使ってCSSに変換するものから、VScodeで簡単に変換できるものもある。
以下のサイトの説明がわかりやすかったので、添付します。
結局Sassってどんな時に使うの？
以下の時に場合分けできると思います。
| 状況 | Sassを使う理由 |
|---|---|
| サイトのパーツが多く、CSSが長くなる | コードを分けたり再利用しやすくなる |
| 色やサイズが何度も出てくる | 変数を使って一括管理できる |
| ボタンや枠線など、似たスタイルが多い | ミックスインでテンプレ化できる |
| 複数人で開発している | 整理しやすい構造にできて保守しやすい |
| メディアクエリ（レスポンシブ）をよく使う | 入れ子で管理できるので見やすい |
記法はどちらを使うの？
結論
最近の主流は、CSSと同じ記述もでき、ネストでも書けるSCSS記法
CSSと書き方が近いSCSS記法が主流として使用されています。
まとめ
個人で開発する時、言ってしまえば分かりにくくても、自分がわかっていれば問題なかったりします。ただ開発は他の人・会社色々な人と協力して行うことがほとんどです。
そんな場面を経てチーム開発が円滑に進むよう、さまざまな手法が開発されていったんだなあ、と歴史を感じました 
Views: 0
