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

YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ」というエントリーで、@mixin を使ったフォントサイズの指定方法を紹介したのですが、Sass 3.1.0 から追加された、@function ディレクティブを使ったほうが、管理しやすいんじゃないかと思い、関数を書いてみました。


使い方は以下のようになります。

body {
    font-size: -yui-font-size(10);
    
    head {
        font-size: -yui-font-size(12px);
    }
}

引数に指定する値ですが、「10」と数字のみでも「10px」と「px」を付けても、Sass側でうまく変換してくれるようです。

@mixin を使った場合に比べて、タイピングする文字数が多いのが難点ですが、次のように !important をつけたい場合など、柔軟なスタイルシートを書けるメリットがあるかと思います。

#main p {
    font-size: -yui-font-size(14);
}
p.error {
    font-size: -yui-font-size(20px) !important;
}

[追記 2011-05-12]

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

コメントを残す

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