ViewportScale の備忘録 #Sass

CSS 設計完全ガイド 6-13 ジャンボトロンで紹介されていたツールで、今回活用させていただいたので、備忘録になります。

考え方

簡単な連立一次方程式を解いています。

横幅が最小 x1 の時のあるプロパティの値 y1 と、横幅が最大 x2 の時のあるプロパティの値 y2 とします。(x1, y1), (x2, y2) を通るときの傾き a と切片 b を求めています。

ドキュメントの Example 1 の例で言えば (320px, 32px), (960px, 48px) を通る点の傾き a と切片 b を求めています。

h1 {
    @include vs(font-size, 320px, 32px, 960px, 48px);
}

2.5vw が傾き a で 24px が切片 b になります。

@media screen and (min-width: 320px) {
    h1 {
        font-size: calc(2.5vw + 24px);
    }
}

実際に出力される CSS は、x1 以下の場合は y1 固定、x2 以上の場合は、y2 固定されていることに留意してください。

ソースコードは、以下のファイルになります。中を覗くと変数名は異なりますが、似たような形をした式が見当たります。

        $x: ($d - $b) / ($c - $a) * 100#{$vp-unit};
        $y: ($c * $b - $a * $d) / ($c - $a) * 1#{$u2};

代入、if, for などの制御構文以外は、コンパイル後、展開される。以下、そのほか。

インストール

$ sudo gem install sass

コンパイル

$ # sass SCSSファイル名:CSSファイル名
$ sass test.scss:test.css