カテゴリー:sass

リスト表示へ

sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する

2011年12月20日 22:45

この記事はLess & Sass Advent calendar 2011の20日目として書いている記事です。

sassを使った繰り返し処理の基本

sassにはプログラム言語と同じような処理が存在します。
その中でも繰り返し処理をピックアップして、ちょっとめんどくさい処理を簡単にする方法をご紹介します。

単純な繰り返し処理

sassには繰り返し処理に使える文として、@each と @for があります。
JSなどではおなじみですね。
使い方も、他のプログラム言語のものと同じです。
@eachは指定したリストを順番に処理するもの、@forは指定した数値の間で繰り返し処理をするものです。
また繰り返しではありませんが、めんどくさい処理をまとめる、という意味で@functionも紹介したいと思います。

記述方法を見てみる(@each)

実際の記述方法は以下になります。

展開前

展開後

@eachは、いくつかの決まったリストなどを処理することに向いています。
例で書いたように、ベンダープレフィクスなどがいい例だと思います。
こうしてベンダープレフィクスを自動でつける処理を書いておけば、あとはこれを指定すれば自動的にベンダープレフィクスをつけてくれる、というわけです。

記述方法を見てみる(@for)

では続いて@for文を見てみましょう。

展開前

@eachとは違い、連番や決まった回数だけ繰り返すのに向いている処理です。
またプログラムのように、現在何回目の繰り返しかが分かるので(例では変数$i)、 それを利用することで、例のように等間隔で配置される要素の位置指定などにも使えます。

実際にこれをCSSに出力すると、以下のようになります。

sassではそれほどの行を書いていなくても、繰り返す回数が増えれば増えるだけどんどんとCSSの中身が増えていきます。
例では10回だけでしたが、それでもこれを実際に手で書くとなるとかなりめんどくさいですよね。
こうした繰り返し処理を簡単にしてくれるのがsassのいいところです。

@functionを使って何度も記述することをまとめる

さて、最後に紹介するのは@function文です。
これも他のプログラムと同様、決まった処理をしてくれるものです。
簡単に例を書いてみます。

今回の例では、事前に作っておいたフォントサイズのリストから、指定したサイズの%を返す関数を書いて見ました。
普段CSSを書いていて、%の相対的なサイズを指定していると、12px相当はいくつだったっけ・・というように、細かい数字が思い出せないことがあります。
しかしこうして関数化しておけば、font-size: fz(10);というように指定するだけで、10px相当の%を自動で設定してくれます。

@if文を使って条件分岐

@if文を@functionの中で使うと、さらに柔軟な対応が可能になります。
上の例でも使っているように、8以下、あるいは40以上の数字が指定されていた場合は、それぞれ数値を丸める処理を入れています。(↓ここの部分)

こうした安全対策や、条件分岐を入れることで汎用的な関数を作ることができるというわけです。

今度の例は渡された引数に応じて出力する値を変化させるものです。
JSなどプログラムに触れたことがある方は見てすぐにどんな処理がされているのか分かると思います。
sassでは、こうした「CSSだとめんどくさい!」と思うことをプログラムを扱うように簡単に記述することができるのが最大のメリットだと思います。

またもうひとつのメリットとして、プログラムが分からなくても使える、という点です。
つまり、sassの基本的な記述法である"入れ子"だけを使い、こうした繰り返し処理を使わなくてもCSSに変換することができることです。

さらに言えば、入れ子すら使わず、ただCSSをそのまま記述するだけでも問題ありません。
これは、sassが分からない人でも問題なく使える、ということを意味しています。

そして、徐々に興味があることやこんなことをやってみたい、と思った処理を導入していくだけで、いずれはsassの書き方が身についていくことでしょう。
プログラムにアレルギーのある人でも、とりあえず一度導入してみてはどうでしょうか。

GUIを使う

余談として、sassを使うにはターミナルなどの、いわゆる「黒い画面」を使わないとできないからなーと思っている人もいるかもしれません。
しかし、Adobe AIR製のGUIでsassファイルのコンパイルができるアプリも登場したようです。
これを使えば、ターミナルなどのCUIが分からない人でも問題なくsassを使うことができると思います。
sassを恐れずに、ぜひ一度試してみてください。

1