scss 黄金比·白银比·その他の比率を手軽に扱うためのSCSS

Posted 2021-05-18

// _aspect-ratio.scss

// 数学

// 黄金比((1+√5)/2)
$ratio-golden: 1.618;
// 黄金比・逆比
$ratio-golden-rev: 1/$ratio-golden;

// 白銀比(√2:A版・B版)
$ratio-silver: 1.41421356237;
// 白銀比・逆比
$ratio-silver-rev: 1/$ratio-silver;

// モニタサイズ

// 4:3
$ratio-4-3: 3/4;
$ratio-4-3-rev: 4/3;

// 16:9
$ratio-16-9: 9/16;
$ratio-16-9-rev: 16/9;

// 16:10
$ratio-16-10: 10/16;
$ratio-16-10-rev: 16/10;

// 写真

// L版(3.5:5)
$ratio-l: 5/3.5;
$ratio-l-rev: 3.5/5;

// 関数

// 数値に比率を適用して返す
@function val-times-ratio($val, $ratio, $round: false) {
    $result: $val * $ratio;
    @if $round == true {
        $result: round($result);
    }
    @return $result;
}

// ミックスイン

// 絶対値で横幅から高さを決める
@mixin set-absolute-height-by-ratio($width-px, $ratio) {
    width: $width-px;
    height: val-times-ratio($width-px);
}

// 現在の横幅から比率に応じて高さを決める
@mixin set-relative-height-by-ratio($ratio) {
    &:before {
        content: '';
        display: block;
        padding-top: 100% * $ratio;
    }
}