Last active
July 28, 2016 06:36
-
-
Save hokkey/29209bbc522070782dbe646cc076fee4 to your computer and use it in GitHub Desktop.
黄金比・白銀比・その他の比率を手軽に扱うためのSCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// _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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment