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)