今更ながらSassとCompassを使ってみました。
今更ながらSassとCompassを使ってみました。
軽く使ってみたらこれは便利かも…
Sassとは
CSSの拡張メタ言語らしいです。
昔は「.sass」という拡張子でHAMLという言語で記述しなければならなかったようですが…
現在は「.scss」というcssとほぼ同じの言語で記述することができるようになったみたいです。
scssのファイルをコンパイルしてcssを生成していきます。
※「.sass」「.scss」どちらの言語でも書けるのですが「.scss」のほうが一般的です。
何が便利かと言うと
- 変数が使える
- セレクタのネスト
- セレクタの参照
- mixin(セレクタやプロパティを纏められる) @includeで読み込む
など、これだけで結構便利だなって思えますよね。
使ってみるとわかりますがcssよりもわかりやすくメンテナンスしやすくなっている印象です。
sassの公式サイトはこちら
compassの公式サイトはこちら
さて、sassの機能を見ていきましょう。
1．変数
これは簡単です。
聞きなれない方もいるかもしれませんが、任意の名前をつけ、後で呼び出せるものって感じです。
コンパイル前
$max_width: 100%;
$main_color: #fff;
#header {
margin-bottom: 20px;
width: $max_width;
}
コンパイル後
#header {
margin-bottom: 20px;
width: 100%;
}
などといったように変数を宣言しておくと変更があった場合、変数の宣言部分を修正すればいいだけなので楽ちんですね。
2．セレクタのネスト
scss内ではセレクタのネストが可能となっております。
これはどこに効いているのか一目瞭然。
そしてメンテナンスも簡単になります！
コンパイル前
#header {
margin-top: 20px;
width: 100%;
height: 100px;
overflow: hidden;
.inner {
width: 980px;
margin: 0 auto;
}
}
コンパイル後
#header {
margin-top: 20px;
width: 100%;
height: 100px;
overflow: hidden;
}
#header .inner {
width: 980px;
margin: 0 auto;
}
こんな感じにきちんとCSSファイルにコンパイルしてくれます。
3．セレクタの参照
簡単な例を下記に書きますので見てみてください。
コンパイル前
a {
color: #333333;
&:hover {
color: #555555;
}
}
コンパイル後
a {
color: #333333;
}
a:hover {
color: $555555;
}
とコンパイルしてくれます。
4.mixin
これはセレクタやプロパティをまとめてセットできるものです。
例えば・・・
コンパイル前
@mixin clearfix {
zoom: 1;
&:before,
&:after {
display: block;
height: 0;
visibility: hidden;
content: "\0020";
}
&:after {
clear: both;
}
}
#header {
@include clearfix;
}
コンパイル後
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
こうやってひとつに纏められます。
更に！！Compassを使うともっと楽ちんに…
まずcompassをインポートします。
@import "compass";
.radius {
@include border-radius(5px);
}
こんな風に書くと、コンパイル後は
.radius {
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}
といったようにベンダープレフィックスまで付けてくれちゃいますｗ
これだけでもめちゃくちゃ便利・・・
今回、簡単に両方が使えるということもあり、SCOUTというものを導入してやってみました。
インストールしちゃえばどっちも使えちゃいます。
リアルタイムでファイルを監視して自動的にコンパイルしてくれます。
書き方が間違っているとエラーになってしまうのですが、こういったものを導入するとエラーを表示してくれるのでどこでエラーになったかわかって便利。しかもバックグラウンドで動いてくれるので楽ちん。
その辺の設定やscoutに関しては気が向いたらまた書きますｗ
ちなみにscoutよりもkoalaの方が良さそうでした。
sublime textをお使いの人はsass用のプラグインがあるのでそちらを使ってみてください。
