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

@mixin を使ったやり方や、@function を使ったやり方を書きましたが、単純に変数を使えばいいんじゃね?というご指摘を Twitter で受けました。そうか。いや、まったくその通りです。

$yui-10px: 77%;
$yui-11px: 85%;
$yui-12px: 93%;
$yui-13px: 100%;
$yui-14px: 108%;
$yui-15px: 116%;
$yui-16px: 123.1%;
$yui-17px: 131%;
$yui-18px: 138.5%;
$yui-19px: 146.5%;
$yui-20px: 153.9%;
$yui-21px: 161.6%;
$yui-22px: 167%;
$yui-23px: 174%;
$yui-24px: 182%;
$yui-25px: 189%;
$yui-26px: 197%;

#main p {
    font-size: #{$yui-14px};
}
p.error {
    font-size: #{$yui-16px} !important;
}

これでスッキリしました。

続続・YUI の CSS Fonts を使う場合は SCSS を利用すると管理しやすいよ」への2件のフィードバック

  1. JL

    おそらく4年ぶりくらいでしょうか
    まだこのブログが続いていて驚きました

    ところでそのコードなんですけど、具体的な書き方は僕もちょうど勉強中なのでわかりませんが、たぶん繰り返し構文とかでもっと簡略化できそうですよね

    おまけに13pxじゃなく14pxを基準にできたりみたいな

    返信
  2. Yoshihide

    >JLさん
    気分に任せて細々と続けております。たまにでよいので、のぞいてやってください。

    たぶん、%の値がうまく計算できるのであればたぶん繰り返し構文などでもっと簡略化できるかもしれないですね。今回に関しては、定数だしべた書きでもいいかなと思いました。

    ベターな書き方があれば是非教えてください!

    返信

コメントを残す

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

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