NOTO

Sassってみる

WEB製作者のためのSassの教科書という本をkindleで気の迷いにより買ってしまったので、簡単に試してみます。

うちの環境

念のためうちの環境ですが、
・mac os 10.9
・ruby 2.0.0.p247
です。

インストール

・Ruby が 必須らしい
・インストール簡単:gemでインストールする

$ sudo gem install sass
Password:
Fetching: sass-3.2.12.gem (100%)
Successfully installed sass-3.2.12
Parsing documentation for sass-3.2.12
Installing ri documentation for sass-3.2.12
1 gem installed

$ sass -v
Sass 3.2.12 (Media Mark)

以上です。

実際に使ってみる

教科書のままですがこんなかんじに使ってみる。
#sass.scss

#main{
width: 600px;
p {
margin: 0 0 1em;
em {
color: #f00;
}
}
small {
font-size: small;
}
}

これを保存してコンパイル?します。
terminalで以下をたたきます
sass(コマンド名) sass.scss(作ったsassファイル):test.css(コンパイルをかけたあとのアウトプットするcss名を指定する)

$sass sass.scss:test.css

で実際に出来たファイルが

#main {
width: 600px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }
#main small {
font-size: small; }

これを以下のコマンドにすると

$sass sass.scss:test.css --style expand

こんなかんじで見慣れた感じで出ます。

#main {
width: 600px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }
#main small {
font-size: small; }

他にも圧縮系のやつとかいろいろあるっぽいです。
ですです。
よし構文勉強するべさ。