Sassの基本的な使い方

Sassのインストールについては先ほど書きましたが
まず簡単な使い方。GUIツールとかもあるみたいですがまずはコマンドを使って試してみます。

ターミナル（Windowsならコマンドプロンプト）を起動して任意のディレクトリに移動して以下のコマンドを実行します。

$ sass --watch .:.
>>> Sass is watching for changes. Press Ctrl-C to stop.

これでOK。
あとはそのディレクトリにscssファイルを生成してコーディングすると自動的にコンパイルしcssファイルに変換してくれます。

試しに以下のような sample.scss を作成してみます。

#container {
    width: 100%;
    height: 50px;

    h1 {
        font-size: 1.5em;
    }
}

そうすると自動的に sample.css ができたことがわかると思います。

#container {
  width: 100%;
  height: 50px; }
  #container h1 {
    font-size: 1.5em; }

これが sass です。

cssのコーディングをしているとセレクタの指定はほぼ必須。
同じものを毎回記述するのはけっこう面倒なことです。
sass では親セレクタにネストすることでこの面倒な手間を省略することができます。
これだけでもかなりいいです。
慣れてしまえば今までの css より直感的に操作できるのではないかと思います。


次によく使うであろうアンカーなどの:hoverや:activeなどの疑似クラス。
これも簡単です。
sample.scss

a {
    font-size: .9em;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        text-decoration: none;
    }
}

sample.css

a {
  font-size: .9em; }
  a:hover {
    text-decoration: underline; }
  a:visited {
    text-decoration: none; }

scss の特殊文字 & を使うと親セレクタと & を置換してくれます。
簡単です。

ほかにも sass には変数や関数を作ることもできますし、@mixinやsingleton といった機能も備えています。
このあたりは追々。


sass の コマンドについてちょっとメモ。

< --watch >

フォルダの監視

--watch input/stylesheets:output/stylesheets

ファイルの監視

--watch input.scss:output.css

< --style >
nested / compact / compressed / expanded

--watch と --style は組み合わせて使うことができます。
時間があればそれぞれ試してみてください。

$ sass --style compact --watch .:.

#container { width: 100%; height: 50px; }
#container h1 { font-size: 1.5em; }

a { color: #888; font-size: .9em; }
a:hover { text-decoration: underline; }
a:visited { text-decoration: none; }