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

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


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

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

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