はじめての Sass. （Sass. を使ってみる）

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 もそうですし。インデントを使用する場合の注意事項ですが、インデントはスペース１文字です。初め知らずにスペース４文字入れビルドエラーになりました。。

実際に「CSSもくもく会」で作成した main.sass を見てみます。

定数

定数を定義します。１行目はベンダープレフィックスを定義した定数です。２行目は 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 を覚えなくていいという議論は成り立ちませんので悪しからず。。