Simplog: sass・compassの導入

sassとは

公式サイトによると

Syntactically Awesome StyleSheets

の頭文字をとった略で、日本語にすると

構文的に（Syntactically）

素晴らしい（Awesome）

スタイルシート（StyleSheets）

となる（直訳）みたいです。

具体的な意味合い・機能

sassはcssを記述するためのメタ 言語の一つであり、また同言語で記述したファイルをcssファイルへ変換するためのソフトウェアとしての名称でもあります。

同言語のファイルには「.sass」と「.scss」があります。

.sass

古い構文で、記述の方法がcssと違う

.scss

css3の構文を拡張したもので、.sassよりもcssの記述に近い新しい構文

上記のような特徴から、これからsassを導入していくなら.scssを覚える方が良いと思います。

そもそもなぜsassを使うのか

cssの記述方法はシンプルで学習コストが低く、誰でも割とすぐに始められますが、シンプルであるが故のデメリットもあります。

・シンプルすぎて複雑な処理ができない

・大量のコードを書かなければならないためソースコードが肥大化してしまう

・メンテナンス性が悪い

これらcssの問題点を補完し、効率的かつメンテナブルに運用していくためのツールがsassなのです。

導入方法

アプリケーション > ユーティリティ > ターミナル.appを開きます。

sassのインストールにはrubyが必要ですが、macであればRubyは初期インストールされています。試しにRubyのバージョンを確認してみます。

$ ruby -v

とコマンドを入力してenterを押してみます。

ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

バージョン情報が返ってくれば成功です。Rubyもインストールされている事が確認できます。

RubyGemsのアップデート

Rubyで使用されるライブラリやアプリケーションはgemと呼ばれる形式のパッケージで公開されています。そしてこれらをダウンロードしたりインストールしたり、管理を行うパッケージがRubyGemsです。

$ sudo gem update --system

先頭のsudoというコマンドは、権限のないファイルに対して何かを実行する時に使います。スーパーユーザー権限で、ユーザーに関係なくコマンドを実行します。

パスワードを求められるので、自分のパスワードを入力してenterを押します。
この時カーソルに変化はなく入力されているか不安になりますが、見えていないだけできちんとされています。

RubyGems system software updated

と表示されればアップデート成功です。

Latest version currently installed. Aborting.

と表示されたら最新版がインストールされています。

sassのインストール

ようやくsassのインストールです。

$ sudo gem install sass

と入力してenterを押しましょう。

Successfully installed sass-3.4.15

と表示されたらsassのインストール成功です。
（バージョンは変わっている場合があります。）

sassのアップデート

$ sudo gem update sass

新しいバージョンのsassが公開されていれば、更新してくれます。

Nothing to update

と表示されたら、最新版がインストールされています。

同様にcompassもインストールして使用するのがセオリーですが、長くなってきてしまったのでそれはまた次回にします。