Sass記法（SCSS）を使ってCSS管理する

Sass（Syntactically Awesome Style Sheets）は、CSSの拡張言語であり、CSSの書き方をより効率的かつ強力にするための機能を提供します。変数、ネスト、ミックスイン（関数のようなもの）、継承、インポートなどの機能を使って、CSSの管理と再利用を簡単にすることができます。Sassには主に2つの構文があります。SCSS（Sassy CSS）と呼ばれるCSSに近い構文と、インデント（空白）に依存する簡潔な構文のSassです。ここでは、より広く使用されているSCSSを使えるように、macOSの開発環境を整えていきます。

開発環境
rbenvのインストール
Rubyのインストール
Sassのインストール
記法
1. ネストの使用例
1. 変数の使用例
1. インポートの使用例
Sassのコンパイル

開発環境

ソフトウェア	バージョン	備考
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 ~/.zshrc

Rubyのインストール

インストール可能な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 --system

Sassのインストール

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

スポンサー広告