Parallels Desktop 5% OFFクーポンCheck!

Saasとは?Macにインストールする方法と使い方

Sassをインストールする方法

CSSを効率的に記述するためのメタ言語SassをMacにインストールします。Homebrewを使って40秒でインストールが完了します。では、レッツラゴー(死語)。

環境
  • Mac mini (M1, 2020)
  • macOS Monterey
  • Homebrew 3.4.5

Homebrewを使いますので、まだ導入していない場合はこちらもどうぞ。

目次

3つの実装どれを使うか

Sassには下記の3つの実装があります。

Ruby SassRubyによるSassの最初の実装。2019年3月にサポートが終了。
LibSassC/C++による実装。2020年10月に非推奨となる。
Dart SassDartによる実装。公式が使用を推奨している。

ということで、迷うことなく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.2rem

SCSSの記述例

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:css

Sassの文法

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;
}

演算

値に対して演算子 + - * / を使って計算をすることができます。

除算 / は非推奨となっており、将来廃止されます。代わりに math.div 関数や乗算 * を使いましょう。

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;
}

というわけで、今回はこんなことができますよ〜という大まかな紹介をしました。また別の機会にもっと詳しい解説をするとかしないとか(どっち)。

でわでわ

Sassをインストールする方法

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次