Sass記法（SCSS）を使ってCSS管理する
Sass（Syntactically Awesome Style Sheets）は、CSSの拡張言語であり、CSSの書き方をより効率的かつ強力にするための機能を提供します。変数、ネスト、ミックスイン（関数のようなもの）、継承、インポートなどの機能を使って、CSSの管理と再利用を簡単にすることができます。Sassには主に2つの構文があります。SCSS（Sassy CSS）と呼ばれるCSSに近い構文と、インデント（空白）に依存する簡潔な構文のSassです。ここでは、より広く使用されているSCSSを使えるように、macOSの開発環境を整えていきます。
開発環境
| ソフトウェア | バージョン | 備考 |
|---|---|---|
| macOS | 14.2 | |
| rbenv | 1.2.0 | この記事でインストール |
| ruby | 3.2.2 | この記事でインストール |
| sass | 3.7.4 | この記事でインストール |
Sassを動かすためにはRubyが必要なため、まずはRubyの開発環境をインストールしていきます。
rbenvのインストール
bash
$ brew install rbenv ruby-build
$ echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrcRubyのインストール
インストール可能なRubyのバージョンを確認:
bash
$ rbenv install --list
3.0.6
3.1.4
3.2.2
jruby-9.4.5.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-23.1.1
truffleruby+graalvm-23.1.1この中から最新のバージョンを選んでインストール:
bash
$ rbenv install 3.2.2
$ rbenv global 3.2.2
$ sudo gem update --systemSassのインストール
bash
$ sudo gem install sass
$ sass -v
Ruby Sass 3.7.4これでSassの開発環境が整いました。
記法
SCSS記法を使うと、ネストできたり、変数が使えたり、インポートでファイルを分割管理できたりと便利です。
ネストの使用例
scss
article {
iframe { // YouTube埋め込み
aspect-ratio: 16/9;
width: 100%;
height: 100%;
min-height:194px;
}
iframe.wiki_sounds {
width: 220px;
height: 40px;
}
.h2-gray {
pre.code code, .codeInline {
background: #f2f2f2;
}
}
}変数の使用例
scss
$default-button-bg: #444;
$default-button-hover-bg: #777;
$default-button-color: #fff;
@mixin default-button-base {
display: block;
width: 180px;
margin: 0.8em 0 3.0em 0;
padding: 6px;
background: $default-button-bg;
font-size: 1.0em;
text-align: center;
color: $default-button-color;
text-decoration: none;
a {
&:hover {
background: $default-button-hover-bg;
}
}
}インポートの使用例
scss
@import 'cm2h.scss';
@import 'variables';
@import 'utilities';
@import 'index_list';
@import 'base';
@import 'layout';
@import 'grid';
@import 'buttons';
@import 'cards';
/* MathJax */
.MJXc-display {
overflow-x: auto;
text-align: left !important;
margin: 1em 0 1em 2em !important;
}
.mjx-box {
text-align: left !important;
}Sassのコンパイル
| 説明 | 実行コマンド |
|---|---|
| 各セレクタのCSSルールを1行にまとめて出力 | $ sass main.scss:main.css --style compact |
| 余分な空白やコメントを削除し、CSSを最小化してコンパイル | $ sass main.scss:main.css --style compressed |
| 変更を監視し、自動的にコンパイル | $ sass --watch main.scss:../css/main.css |