SASS
haml付属の「css2sass」ツールを使うと、CSSをSASSにコンバートできます。既存のCSSをSASSで書き直す場合に便利。 $ css2sass <変換元CSSファイル> <変換先SASSファイル> 具体例。以下のCSSを /* コメント */ #nav { width: 650px; } #nav ul li { float: le…
Mixinは引数を受け付けるようにでき、関数のように使うことが可能です。 // 引数を受け取るmixin =test(!color) color = !color border: 1px solid #{!color*3} .foo // 引数つきでmixinを適用する。 +test(#111) font-size: 12px .var +test(#222) font-siz…
Mixinで、あらかじめ定義したCSSプロパティの集合を、複数のルールセットに適用することができます。よく使うプロパティセットをMixinできるようにしておけば、定義が重複してしまうのを回避できます。使い方は以下の通り。 「=」で、MixinするCSSプロパティ…
SASSではifやforなどの基本的な制御構文が使えます。 条件分岐 「@if」を使います。 @if <条件> ...<処理> @else if <条件> ...<処理> @else ...<処理>以下はフラグを見てCSSプロパティを切り替える例です。 !debug = true div // フラグをみてプロパティを…
「#{!}」でセレクタやプロパティ名に変数を使うことができます。 !name="foo" !color="color" div.#{!name} background-#{!color}: #333 変換結果です。 div.foo { background-color: #333; }
「+」や「*」といった演算子が使えます。 // 演算子を使う。 // 変数の参照時と同じく「=」を使う点のみ注意。 .foo width = 10px + 10px height = 10px - 5px .var width = 10px * 10 height = 10px / 5 font-size = 10px % 2 変換結果です。 .foo { width:…
!<変数名> = <値>で定義して、以下のような感じで参照します。 .foo color = !<変数名>具体例。 // 変数を使う !color = #333 .foo // 作成した変数は「=」で参照できる。 // 「:」じゃないのでご注意。 color = !color // 変数なので値を更新可能。 !color …
「-t」オプションで変換後のCSSのスタイルを指定できます。 $ sass -t <スタイル> <変換元のSASS> <変換後のCSS>「」として指定可能な値は以下の4つ。 値 説明 nested SASSでの記述に似た感じのスタイルで出力します。(デフォルト) expanded 手書きのCSSに近…
CleverCSS: Rich Python-like DSL for CSSからのリンクより、SASSなるものを発見。 「SASS」はCSSをより簡潔に読みやすく書く為のDSLで、 以下のような機能を提供します。 ネストでのプロパティ指定 変数 一度定義した設定値の共有(mixin) 定義した「.sass」…
