HTML - SCSS - 概要

 
1. 能書き
2. 環境構築

1. 能書き

 やっと CSS に慣れてきたと思っていましたが、2006年には、もう SASS ってのが登場していたんですな。  と、この記事を書いているのが 2017年10月16日なので、ほぼ、10年遅れ・・・。  ともあれ、便利そうなので少し勉強してみます。  詳細は「ウィキペディア - SASS」をご覧いただくとして。  とりあえず、.sass は、わたしにとって文法が厄介なので、もっぱら .scss の方を使おうと思います。  だって、改行やインデントに意味を持たせる文法って、なじめないのです。  参考サイトは以下になります。
すぐに使えるSCSS入門」
「CSSのメタ言語Sass(SCSS)、LESSの完全入門」
「さくらのレンタルサーバー上でsass&compassをインストールして使う」
「(Macで)Sassのコンパイル、基本のアレコレをざっくりと」
「現場で役立つ実践Sass(1)Sassの環境を整える
 「現場で役立つ実践Sass(1)Sassの環境を整える」の孫引きになりますが「CSSだけを使っている “No Preprocessor” の割合は約15%となっており、約85%は何らかのCSSプリプロセッサーを使っているようです。」ってのはちょっと衝撃(笑劇?)ですな。

2. 環境構築

 環境構築というほど大袈裟なものではなく、sass という、.scss のコンパイラをいれるだけのことですが・・・。  はじめて、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)