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; }
他にも圧縮系のやつとかいろいろあるっぽいです。
ですです。
よし構文勉強するべさ。