CSSを効率的に記述するためのメタ言語SassをMacにインストールします。Homebrewを使って40秒でインストールが完了します。では、レッツラゴー（死語）。
環境
- Mac mini (M1, 2020)
- macOS Monterey
- Homebrew 3.4.5
Homebrewを使いますので、まだ導入していない場合はこちらもどうぞ。
目次
3つの実装どれを使うか
Sassには下記の3つの実装があります。
| Ruby Sass | RubyによるSassの最初の実装。2019年3月にサポートが終了。 |
| LibSass | C/C++による実装。2020年10月に非推奨となる。 |
| Dart Sass | Dartによる実装。公式が使用を推奨している。 |
ということで、迷うことなくDart Sassをインストールするしかないのです。ググった時によく見かける gem なんちゃら〜 というのはRuby Sassのインストール方法ですからね。古い情報に惑わされるな。
インストール
いつものようにHomebrewを使ってインストールします。
sass/sass/sass という謎の文字列を見て、なんのこっちゃと思うかも知れませんが、前半の sass/sass はサードパーティのリポジトリを表していて、3つめの sass がFormulaの名前です。安心してください。
% brew install sass/sass/sass
==> Tapping sass/sass
Cloning into '/opt/homebrew/Library/Taps/sass/homebrew-sass'...
remote: Enumerating objects: 757, done.
remote: Counting objects: 100% (382/382), done.
remote: Compressing objects: 100% (256/256), done.
remote: Total 757 (delta 247), reused 252 (delta 120), pack-reused 375
Receiving objects: 100% (757/757), 92.56 KiB | 110.00 KiB/s, done.
Resolving deltas: 100% (457/457), done.
Tapped 4 formulae (18 files, 127.6KB).
==> Tapping dart-lang/dart
Cloning into '/opt/homebrew/Library/Taps/dart-lang/homebrew-dart'...
remote: Enumerating objects: 2777, done.
remote: Counting objects: 100% (941/941), done.
remote: Compressing objects: 100% (592/592), done.
remote: Total 2777 (delta 628), reused 569 (delta 317), pack-reused 1836
Receiving objects: 100% (2777/2777), 523.33 KiB | 147.00 KiB/s, done.
Resolving deltas: 100% (1755/1755), done.
Tapped 17 formulae (46 files, 669.6KB).
==> Downloading https://storage.googleapis.com/dart-archive/channels/stable/release/2.16.2/sdk/dartsdk-macos-arm64-release.zip
######################################################################## 100.0%
==> Downloading https://github.com/sass/dart-sass/archive/1.50.0.tar.gz
==> Downloading from https://codeload.github.com/sass/dart-sass/tar.gz/refs/tags/1.50.0
-=O#- # # #
==> Installing sass from sass/sass
==> Installing dependencies for sass/sass/sass: dart-lang/dart/dart
==> Installing sass/sass/sass dependency: dart-lang/dart/dart
🍺 /opt/homebrew/Cellar/dart/2.16.2: 869 files, 491.5MB, built in 6 seconds
==> Installing sass/sass/sass
==> /opt/homebrew/opt/dart/libexec/bin/dart pub get
==> /opt/homebrew/opt/dart/libexec/bin/dart compile exe -Dversion=1.50.0 bin/sass.dart -o sass
🍺 /opt/homebrew/Cellar/sass/1.50.0: 7 files, 8.3MB, built in 11 seconds
==> Running `brew cleanup sass`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).動作確認をしまーす。引数なしでヘルプ表示です。
% sass
Compile Sass to CSS.
Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> <input/>:<output/> <dir/>
━━━ Input and Output ━━━━━━━━━━━━━━━━━━━
--[no-]stdin Read the stylesheet from stdin.
--[no-]indented Use the indented syntax for input from stdin.
-I, --load-path=<PATH> A path to use when resolving imports.
May be passed multiple times.
-s, --style=<NAME> Output style.
[expanded (default), compressed]
--[no-]charset Emit a @charset or BOM for CSS with non-ASCII characters.
(defaults to on)
--[no-]error-css When an error occurs, emit a stylesheet describing it.
Defaults to true when compiling to a file.
--update Only compile out-of-date stylesheets.
━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━
--[no-]source-map Whether to generate source maps.
(defaults to on)
--source-map-urls How to link from source maps to source files.
[relative (default), absolute]
--[no-]embed-sources Embed source file contents in source maps.
--[no-]embed-source-map Embed source map contents in CSS.
━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-w, --watch Watch stylesheets and recompile when they change.
--[no-]poll Manually check for changes rather than using a native watcher.
Only valid with --watch.
--[no-]stop-on-error Don't compile more files once an error is encountered.
-i, --interactive Run an interactive SassScript shell.
-c, --[no-]color Whether to use terminal colors for messages.
--[no-]unicode Whether to use Unicode characters for messages.
-q, --[no-]quiet Don't print warnings.
--[no-]quiet-deps Don't print compiler warnings from dependencies.
Stylesheets imported through load paths count as dependencies.
--[no-]verbose Print all deprecation warnings even when they're repetitive.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.Sassとは
Sassとは Syntactically Awesome Style Sheets （構文的にスゴいスタイルシート）の略です。変数や関数、四則演算などを使用してスタイルシートを書き、それをCSSに変換して利用します。
なんでわざわざ単純なCSSを難しくするんだと思うかも知れませんが、これで効率よくスタイルシートを書くことができるようになるんです。
Sassの使い方
SASS記法とSCSS記法
SassにはSASS記法とSCSS記法という2つの記法があります。
| SASS記法 | 波括弧 {} の代わりにインデントを使う。セミコロン ; を使わない。拡張子が .sass のファイルに記述する。 |
| SCSS記法 | 波括弧 {} やセミコロン ; を使う、CSSに似た文法。拡張子が .scss のファイルに記述する。 |
SASSの記述例
p
background: #ddd
color: #333
strong
color: #000
font-size: 1.2remSCSSの記述例
p{
background: #ddd;
color: #333;
strong{
color: #000;
font-size: 1.2rem;
}
}どちらで記述してもいいのですが、SCSS記法のほうが人気が高いようです。この記事でもSCSS記法を使っていきます。
SASS/SCSSをCSSに変換する方法
SASSやSCSSで記述したファイルをCSSに変換するには sass コマンドを使います。
#style.scss を style.css に変換
% sass style.scss style.css
#余分なホワイトスペースを取り除いて変換
% sass --style compressed style.scss style.css
#複数のファイルを変換
% sass style1.scss:style1.css style2.scss:style2.css ...
#scssディレクトリ内のファイルをまとめて変換してcssディレクトリに出力
% sass scss:cssSassの文法
Sassの文法を簡単に紹介します。
ネスト
Sassではセレクタなどのネスト（入れ子）を表現する時に親要素の記述を省略することができます。下記の例では #main というセレクタの名前を変更することになった場合、1ヶ所だけの修正で済むようになります。
SCSSの記述
#main{
background: white;
ul{
list-style-type: none;
li{
font-size: 0.9rem;
a{
color: green;
}
}
}
}変換後のCSS
#main {
background: white;
}
#main ul {
list-style-type: none;
}
#main ul li {
font-size: 0.9rem;
}
#main ul li a {
color: green;
}変数
変数を使うことができます。変数には値を入れておいて何度も使い回すことができます。プログラミングっぽくなってきました。
SCSSの記述
$main-color: #3e62ad;
.button{
background-color: $main-color;
}変換後のCSS
.button {
background-color: #3e62ad;
}ミックスイン
変数はプロパティの値を入れておくためのものですが、ミックスインはプロパティと値のセットを入れておくことができます。@mixin ミックスイン名 で定義して @include ミックスイン名 で呼び出します。
SCSSの記述
@mixin superstrong{
font-size: 1.5rem;
font-weight: bold;
color: red;
}
.strong{
@include superstrong;
}変換後のCSS
.strong {
font-size: 1.5rem;
font-weight: bold;
color: red;
}演算
値に対して演算子 + - * / を使って計算をすることができます。
SCSSの記述
.big-box{
width: 300px + 100;
}
.small-box{
width: 300px - 100;
}
.wide-box{
width: 300px * 2;
}変換後のCSS
.big-box {
width: 400px;
}
.small-box {
width: 200px;
}
.wide-box {
width: 600px;
}関数
Saasでは関数を使うこともできます。
SCSSの記述
//色を明るくする
span{
color: lighten(#3e62ad, 30%);
}
//色を暗くする
span{
color: darken(#3e62ad, 30%);
}
//色に透明度を指定する
span{
color: rgba(#3e62ad, .5);
}
//2つの色を混ぜる
span{
color: mix(red, blue);
}
//数値の小数点以下を四捨五入する
div{
width: round(510px * 0.25);
}
//数値の小数点以下を切り上げる
div{
width: ceil(510px * 0.25);
}
//数値の小数点以下を切り下げる
div{
width: floor(510px * 0.25);
}変換後のCSS
span {
color: #a5b8df;
}
span {
color: #16223c;
}
span {
color: rgba(62, 98, 173, 0.5);
}
span {
color: purple;
}
div {
width: 128px;
}
div {
width: 128px;
}
div {
width: 127px;
}というわけで、今回はこんなことができますよ〜という大まかな紹介をしました。また別の機会にもっと詳しい解説をするとかしないとか（どっち）。
でわでわ
コメント