前々回:CSS拡張メタ言語について学ぶ~その1~
前回:CSS拡張メタ言語について学ぶ~その2~
でCSS拡張メタ言語がどのようなものかについて書きました。
今回は実際に使ってみましょう。
インストール
sass(scss)を例に紹介していきます。
インストールするにあたってRubyが必要です。
windowsの方は事前にインストールが必要です。
以下のコマンドを実行してインストール
sudo gem install sass
インストールが終わったら以下のコマンドを実行
sass -v
バージョンが表示されればOKです。
使ってみる
『style.scss』という名前でファイルを作成し、下記を記述。
/* style.scss */ $color:#ffffff; $fontsize:16px; body{ color: $color; font-size: $fontsize; }
scssからcssに変換(コンパイル)してみましょう。
ターミナル(windowsはコマンドプロンプト)のcdコマンドで.scssファイルがある場所まで移動します。
以下のコマンドで、style.scssからstyle.cssを出力することができます。
sass --style expanded style.scss:style.css
これで、style.scssからstyle.cssを生成することができます。
/* style.css */ body { color: #ffffff; font-size: 16px; }
『–style expanded』オプションをつけるとインデントを整えてくれるので便利です。
コマンドいろいろ
先ほど紹介した『–style expanded』の他にも便利なコマンドがあります。
スタイルの指定方法
- scssファイル
/*style.scss*/ li{ border-bottom: 1px solid #eee; a{ display: block; padding: 10px; background-color: #fff; &:hover{ background-color: #aaa; } } span{ font-size: 14px; color: #333; } }
- sass style.scss:style.css –style nested
/* style.css */ li { border-bottom: 1px solid #eee; } li a { display: block; padding: 10px; background-color: #fff; } li a:hover { background-color: #aaa; } li span { font-size: 14px; color: #333; }
- sass style.scss:style.css –style expanded
/* style.css */ li { border-bottom: 1px solid #eee; } li a { display: block; padding: 10px; background-color: #fff; } li a:hover { background-color: #aaa; } li span { font-size: 14px; color: #333; }
- sass style.scss:style.css –style compact
/* style.css */ li { border-bottom: 1px solid #eee; } li a { display: block; padding: 10px; background-color: #fff; } li a:hover { background-color: #aaa; } li span { font-size: 14px; color: #333; }
- sass style.scss:style.css –style compressed
/* style.css */ li{border-bottom:1px solid #eee}li a{display:block;padding:10px;background-color:#fff}li a:hover{background-color:#aaa}li span{font-size:14px;color:#333}
SCSSファイルの更新を監視する
sass --style expanded --watch style.scss:style.css
style.scssに何か変更を加えて保存すると、自動でcssフォルダの中にあるstyle.cssに、変更が反映されます。
最後に
フレームワークとGUIもあるので紹介します。
フレームワーク(Compass)
Compassは、sassを拡張したオープンソースのフレームワークです
sassをより使いやすく便利にしたのがCompassになります。
Compassのメリット
- CSSスプライトが簡単に作成できる
Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 -
独自のmixinが利用できる
グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 -
独自の関数が利用できる
画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。
インストール
以下のコマンドを実行
sudo gem install compass
GUI
CodeKit(Mac)
Sassだけに限らず、Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript、Compassと多種多様なメタ言語を自動コンパイルしてくれる優れもの。他にもlive reload(ファイルをセーブされるたびにブラウザを自動的にリロードする)やjsLint(JavaScriptの文法チェック)など
Hammer(Mac)
Sass、CoffeeScript、HAML、Markdownなど、多彩なコンパイラを持ちながら、HTMLのインポート、画像プレースホルダ、変数の使用など
Scout(Win&Mac)
WindowsとMacのどっちでも動くフリーソフト。
Prepros(Win&Mac)
WindowsとMacのどっちでも動くフリーソフト。
Koala(Win&Mac&Linux&Ubuntu)
さまざまなプラットフォームで動くプリプロセッサです。Less、Sass、Compass、CoffeeScriptをサポートしています。
Compass.app
Compassの公式のアプリです。