CSSプリプロセッサー

http://lucianmarin.com/peculiar/(b:title)というCSS3で書かれたアイコンセットを通して私たちのCSSの記述はどんなものになりつつあるのか、
そして、複雑化するCSSとどのように向き合えばいいのか、CSSプリプロセッサーを例にとり、考えてみます

  • Tab Area

peculiar


画面に表示しているのは、CSS3で出来たhttp://lucianmarin.com/peculiar/(b:title)というアイコンセットです。

Minus

Minus

Plus

Disc

Clock

Volume

Pause

Plasma

Bulb

iPhone

Battery

Battery

Battery

Video

Paper

Smile

Picture


このiconのスタイルルール

[css]

 /*
  Peculiar was created by Lucian Marin - lucianmarin.com
  Licensed under GPL
 */
 
 .icon {
 position: relative;
 width:16px;
 height:16px;
 margin: 16px;
 }
 .icon .name {
 width: 32px;
 position: absolute;
 text-align: center;
 top: 18px;
 left: -8px;
 }
 
 .icon-minus-circle {
 background-color: #000;
 border-radius:8px;
 -webkit-border-radius:8px;
 -moz-border-radius:8px;
 width: 16px;
 height: 16px;
 position: absolute;
 top:0;
 left:0;
 }
 ....

[/css]
大量のスタイルルールを変更しなければなりません。


CSSプリプロセッサーを使う

このような時、CSSプリプロセッサーを使えば、色を変数として登録できるようになるので、簡単に変更が出来るようになります。

以下のように、することで、簡単に変更が出来るようになります。

[css]

 @color-a:#000;
 @color-b:#fff;
 
 /*
  Peculiar was created by Lucian Marin - lucianmarin.com
  Licensed under GPL
 */
 
 .icon {
 position: relative;
 width:16px;
 height:16px;
 margin: 16px;
 }
 .icon .name {
 width: 32px;
 position: absolute;
 text-align: center;
 top: 18px;
 left: -8px;
 }
 
 .icon-minus-circle {
 background-color: @color-a;
 border-radius:8px;
 -webkit-border-radius:8px;
 -moz-border-radius:8px;
 width: 16px;
 height: 16px;
 position: absolute;
 top:0;
 left:0;
 }

[/css]


画像を使っていないだけでもすごいですが、例えば、このアイコンの色を変えたいと思ったら、どうしますか?

その方法は、いたって簡単です。WordPressを使っている方なら、lessをサポートしたテーマファイルを入れ替えるだけです。

http://wordpress.org/extend/themes/obandes(b:WordPress theme obandes)


新着記事

コメントは受け付けていません。