YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509 というエントリーを見て、最近 CSS Fonts を SCSS で管理するようになってすごく楽になったので、ご紹介。

_fonts.scss といったような名前で次のような mixin を追加した SCSS ファイルを用意します。

これを style.scss などで include して使います。こんな感じ。

@import "fonts";
header {
h1 {
@include font_15;
}
}

これをコンパイルすると、次のような style.css が生成されます。

/* YUI Fonts.css
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body { font: 13px/1.231 arial, helvetica, clean, sans-serif; *font-size: small; *font: x-small; }

select, input, button, textarea { font: 99% arial,helvetica,clean,sans-serif; }

table { font-size: inherit; font: 100%; }

pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; }

header h1 { font-size: 116%; }

「15px にしたい場合は、何％なんだっけ？」とわざわざ確認しなくても直感的に記述できるので、気に入ってます。

[追記 2011-05-12]

続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよというエントリーを書きました。

[追記 2011-05-12]

さらに続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよというエントリーを書きました。