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)