ずーっと気になってはいたものの、なかなか手を出さずにいたsass。
便利とか、もう手放せなくなる…とか。
でも何か難しそうだし、勉強しないといけないし…。
さらに社内で導入するのであればメンバーにも学習してもらわないといけないし…。
と、なかなか導入に踏み切れなかったのです( ˘ω˘)
でも人も増え、メンテナンスや制作のルールなどを考えると導入した方がはるかに便利そう。
次の大規模プロジェクトに向けてsassを導入していく事に決めました。（勝手に）
全部覚えて使いこなすのは難しいですが、便利で比較的簡単なものだけ使っていく…というスタンスでも十分に効率アップが出来そうです。
sassとは？
cssを拡張したメタ言語とのことです。
簡潔に言うとcssでのコーディング効率やメンテナンスに優れた書き方が可能になります！
読みやすくなる
セレクタの入れ子、ネストする事で分かりやすくメンテナンスが楽に出来ます
ul {
margin-right:10px;
li {
float:left;
}
}
ul {
margin-right: 10px;
}
ul li {
float: left;
}
変数が使える
何度も同じコードを書かずに済みますし、変更も一箇所で行えます
redは#ff0033ですよ！と書いておけば以降は$redと書くだけでcssには#ff0033と記述してくれます
$red: #FF0033;
.caution {
color: $red;
}
.caution {
color: #FF0033;
}
よく使うコードを設定しておける
Mixinを使えば、よく使うコードを設定できます
@mixin inline-block {
display: inline-block;
*display: inline;
*zoom: 1;
}
.menu-list {
@include inline-block;
}
.menu-list {
display: inline-block;
*display: inline;
*zoom: 1;
}
継承も行えて便利
@extendを使えば継承元のセレクタから呼び出す事が可能です
.button {
background-color: #CCC;
border: 1px solid #999;
width: 200px;
height: 50px;
}
.button-red {
@extend .button;
background-color: #FFB2BC;
border: 1px solid #FF667A;
}
.button, .button-red {
background-color: #CCC;
border: 1px solid #999;
width: 200px;
height: 50px;
}
.button-red {
background-color: #FFB2BC;
border: 1px solid #FF667A;
}
他にも便利な機能が盛りだくさん、さらに拡張機能を追加できるcompassを導入する事でもっとパワーアップも可能です！
sassとcompassを導入してみましょう
まずはRubyをインストール
今回はWindowsでの導入を書いてみます。
Macの方は標準でRubyはインストールされているようなので大丈夫です。
トップのダウンロードボタンからRubyInstallers内にある最新のものをダウンロードします。
64ビット版の方は(x64)と書かれている方です。
ここにチェックを入れておいた方が良いようです( ˘ω˘)
sassのインストール
スタート→アクセサリ → コマンドプロンプトを起動
gem install sass
と入力してEnterキーを押します。
ちなみにテキストをコピーして右クリックで貼付けも可能です。
compassのインストール
続いて
gem install compass
と入力してEnterキーを押します。
少しインストール始まるまで時間がかかる場合もあるようですが気長に待ちましょう。
GUIソフトをダウンロード
sassで書いたファイルをcssに変換してくれるソフトです。
コマンドプロンプトを起動して書くより便利だと思うので、最初は是非とも導入したいですね。
今回はアイコンの可愛いKoalaを使います。
他にも多くのGUIソフトがあるので機能やらデザインやらで選んでみてください。
Koala – a gui application for LESS, Sass, Compass and CoffeeScript compilation.
ダウンロードをポチッとな。
これで環境は整いました。
Koalaを開いて環境設定で言語を日本語に一応変換しておきましょう。
sassを使ってみよう
上記のコードが書かれたsassファイルと設定ファイル（config.rb）が入っているzipを用意してみました。
sassで書いたファイルが入ったフォルダごとKoalaにドラッグ＆ドロップ。
これで監視され、sassを書いたファイルを保存すればcssに自動で変換されるようになります。
なんて素敵( ˘ω˘)
おわりに
今回はsassとcompassの導入とsassの動作確認まで行いました。
次は便利なcompassもご紹介していけたらなと思います！
また、sublime textを使えばKoalaのようなGUIソフトの必要もなくcssに変換、コンパイルする事も可能です。
他にも使い勝手の良い機能が満載のsublime textはオススメです！
こちらもまた別の機会にご紹介できたらなと思います( ˘ω˘)
社内での導入をずっと見送ってきましたが、実際に触ってみると思ったより簡単で便利なので是非とも導入してみてはいかがでしょうか。
最近ではsassの使い方も昔に比べると簡単になってきたんじゃないかなーと色々と調べていて思いました。
便利な機能が簡単に使える、良い時代になってきたのかもしれません( ˘ω˘)
