- 1. 概要
- 2. 環境構築
- 3. 参考サイト
1. 概要
やっと「CSS」に慣れてきたと思っていましたが、2006年には、もう「SASS」ってのが登場していたんですな。
と、この記事を書いているのが 2017年10月16日なので、ほぼ、10年遅れ・・・。
ともあれ、便利そうなので少し勉強してみます。
詳細は「ウィキペディア - SASS」をご参照ください。
「.sass」は、わたしにとって文法が厄介なので、もっぱら「.scss」の方を使おうと思います。
だって、改行やインデントに意味を持たせる文法って、なじめないのです。
リンク切れのサイトからの孫引きになりますが「CSSだけを使っている “No Preprocessor” の割合は約15% となっており、約85% は何らかのCSSプリプロセッサーを使っているようです。」ってのはちょっと衝撃（笑劇？）ですな。
2. 環境構築
環境構築というほど大袈裟なものではなく、「sass」という、「.scss」のコンパイラをいれるだけのことですが・・・。
と言うて、以下の作業も現在（2026年9月30日）では、行いません。
現在は、「Visual Studio Code」の「.scss」拡張機能をインストールすれば、コンパイラもインストールされるし、「.scss」ファイルを更新すれば、自動で「.css」を更新してくれるようになりました。
はじめて、「ruby」の「gem」というのを使ってみるのでちょっとドキドキ。
そもそも「gem」がはいっていなければ
プロンプト略
whereis rubygem-gems
rubygem-gems: /usr/ports/devel/rubygem-gems
cd /usr/ports/devel/rubygem-gems
make
make install
インストールしたら
> gem install sass
Fetching: rb-fsevent-0.10.2.gem (100%)
Successfully installed rb-fsevent-0.10.2
Fetching: ffi-1.9.18.gem (100%)
Building native extensions. This could take a while...
Successfully installed ffi-1.9.18
Fetching: rb-inotify-0.9.10.gem (100%)
Successfully installed rb-inotify-0.9.10
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.5.3.gem (100%)
Successfully installed sass-3.5.3
Parsing documentation for rb-fsevent-0.10.2
Installing ri documentation for rb-fsevent-0.10.2
Parsing documentation for ffi-1.9.18
Installing ri documentation for ffi-1.9.18
Parsing documentation for rb-inotify-0.9.10
Installing ri documentation for rb-inotify-0.9.10
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.5.3
Installing ri documentation for sass-3.5.3
Done installing documentation for rb-fsevent, ffi, rb-inotify, sass-listen, sass after 29 seconds
5 gems installed
なんということもなくインストールされました。
> whereis sass
sass: /usr/local/bin/sass
> sass -v
Sass 3.5.3 (Bleeding Edge)
3. 参考サイト
本ページは、下記のサイトを参考にさせていただきました。
「CSSのメタ言語Sass(SCSS)、LESSの完全入門」
「（Macで）Sassのコンパイル、基本のアレコレをざっくりと」
「CSS」関係は、用語も覚えられないので、下記のサイトを参考にさせていただきました。
「CSS セレクター - CSS」（ガイド）
「CSS セレクター - CSS」（リファレンス）
|
|
