Sass. を使ってみる。正確な言い回しではないが HTML5 になりより多くのことを CSS3 に記述することになった。CSS を触っているとよく grep している自分がいたり、単純な記載ミスが多いことに気がついた。またベンダープレフィックスにより同じようなことを繰り返し記述することも多くどうにかならないかと思い Sass. を使ってみることにしました。かなり乗り遅れ感は否めませんが。。
ちょうど Yeoman を触ってますので Sass. をコーティングする基盤は整っていたため入り口は容易でした。
下記内容は、5/25/2013(土)に行われた「CSSもくもく会」で自分が実装した内容です。
Sass. のインストール
Yeoman を利用してますので自身はあまり意識してないです。単独でインストールする場合は Sass. のサイトを読んで頂けたらと思います。
Sass. のフォーマット
Sass. には .sass と .scss の二種類フォーマットがあります。インデント構文の .sass と CSS3 構文の拡張版である .scss です。インデントでくくりを判断するか {} でくくりを判断するかでしょうか。具体的には下記です。
Sass. のビルダーは拡張子によりどちらの構文を用いているかを判断しているようです。
インデント構文
body margin-top: 0px margin-right: 0px margin-left: 0px margin-bottom: 0px background-color: white header font-size: xx-large color: white text-align: center background-color: #6052fd
CSS3 構文の拡張版
body { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; background-color: white; } header { font-size: xx-large; color: white; text-align: center; background-color: #6052fd; }
自分はインデント構文が好みです。Python もそうですし。インデントを使用する場合の注意事項ですが、インデントはスペース1文字です。初め知らずにスペース4文字入れビルドエラーになりました。。
実際に「CSSもくもく会」で作成した main.sass を見てみます。
定数
定数を定義します。1行目はベンダープレフィックスを定義した定数です。2行目は h1 h2 h3 … の色を定義した定数です。
$backgrounds-prefixes: -webkit-, -moz-, -o-, '' !default $hcolor: #ffb6b3
$hcolor を使う方法は簡単で下記の通りです。「background-color: $hcolor」のように使用します。
header font-size: xx-large color: white text-align: center vertical-align: middle background-color: $hcolor height: 100px
margin-top … のようなプロパティの記載方法
margin-top margin-right … のようなプロパティを記載する場合には語句を省略することが可能です。具体的にはmargin: と記載しインデントを与え「-」以降を記載します。
body margin: top: 0px right: 0px left: 0px bottom: 0px background-color: white
CSS では次のようになります。
body { margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; background-color: white; }
定数は
h1, h2, h3, h4, h5, h6 background-color: $hcolor
で
h1, h2, h3, h4, h5, h6 { background-color: #ffb6b3; }
for 文を使用する
span1 span2 … という css クラスを定義し for 文を利用することで記述を簡素化してみます。この span は幅を定義するクラスです。span[変数] とし for 文を作っています。
px を付加したまま演算をさせているところがちょっとびっくり感あります。
$span: 60px @for $i from 1 through 12 .span#{$i} width: $span + 80px * ($i - 1)
CSS では次のようになります。
.span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; } .span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; } .span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; }
each 文を使用する
each 文を使用しベンダープレフィックス部分の記載を簡素化します。ここで $backgrounds-prefixes は初めに定義した定数です。
input font-size: large background-color: #ffffff border: 1px solid #cccccc @each $prefix in $backgrounds-prefixes #{$prefix}box-shadow: inset 0 1px rgba(0, 0, 0, 0.075) #{$prefix}transition: border linear 0.2s, box-shadow linear 0.2s #{$prefix}border-radius: 4px display: inline-block padding: 8px 12px margin-bottom: 10px color: #555555 vertical-align: middle
CSS では次のようになります。
input, table input { font-size: large; background-color: white; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-border-radius: 4px; -moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.075); -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-border-radius: 4px; -o-box-shadow: inset 0 1px rgba(0, 0, 0, 0.075); -o-transition: border linear 0.2s, box-shadow linear 0.2s; -o-border-radius: 4px; box-shadow: inset 0 1px rgba(0, 0, 0, 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; border-radius: 4px; display: inline-block; padding: 8px 12px; margin-bottom: 10px; color: #555555; vertical-align: middle; }
継承する
@extend を使い定義を継承します。継承したくない部分に関しては同じプロパティを再定義してオーバーライドします。下記のように記載しましたが、よく考えてみたらこの書き方には問題がありました。
table input @extend input font-size: small padding: 2px 4px
最後に
CSS3 で様々なことができるようになった反面、記述する内容も増えメンテナンス性も悪くなっているのでこうしたメタデータが記述できることは喜ばしいことと思います。さらに Yeoman を利用していますので修正→ビルド→確認もその場その場で行えましたので開発スピードが上がったように思えます。
Sass. には関数も用意されていて Sass. サイトのサンプルでもあるように
$blue: #3bbfce
より 9% 暗い青が欲しい場合
darken($blue, 9%)
のように記述します。より多くの関数を知りたい場合はここを見てください。
当たり前のことですが Sass. を考えているときは当然 CSS を思い浮かべて書いてます。ですので Sass. を使うということで CSS を覚えなくていいという議論は成り立ちませんので悪しからず。。