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 を利用すると管理しやすいよというエントリーを書きました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>