Usage
Sass
ratio($x, $y, $pseudo)
Parameters
$x
(Required) (Integer) The width term
Default: None
$y
(Required) (Integer) The height term
Default: None
$pseudo
(Optional) (Boolean) Use a pseudo class to maintain ratio.
Default: false
Examples
Sass
.element {@include ratio(16, 9);}
Source File
Located in /assets/scss/partials/_mixins.scss on line 249.
Sass
@mixin ratio($x, $y, $pseudo: false){
$padding: unquote(($y/$x)*100 + "%");
@if $pseudo {
&::before {content: ""; display: block; position: relative; width: 100%; padding-top: $padding;}
} @else {
padding-top: $padding;
}
}
Override
To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.
Sass
@mixin ratio($x, $y, $pseudo){
//Write your own code here, leave it blank, or return false.
}