Sassの変数を活用してフォントサイズをピクセルから自動的にパーセント表記に変換する方法


//例
.hogehoge {
    font-size: fs(14);
}
//下記で出力される↓↓↓
.hogehoge {
    font-size: 117%;
}
//Sass
//基本サイズを12pxとした場合のパーセントの値を配列で並べていく
$sizeList:84%, 92%, 100%, 109%, 117%, 125%, 134%, 142%, 150%, 159%, 167%, 175%, 184%, 192%, 200%, 209%, 217%, 225%, 233%, 241%, 250%, 284%, 292%, 300%, 309%, 317%, 325%, 334%, 342%, 350%, 359%, 367%, 375%, 384%, 392%, 400%, 409%, 417%, 425%, 434%, 442%;
//サイズが10pxよりちいさければ、10pxとし、50pxより大きければ50pxとし、配列とピクセルの値を連携させる。
//※今回は10pxから50pxの間で設定できるように指定。
@function fs($size) {
    @if $size < 10 {
        $size: 10;
    }
    @if $size > 50 {
        $size: 50;
    }
    @return nth($sizeList, $size - 9);
}

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*