Skip to Content
Menu

ratio()

Maintain a responsive aspect ratio.

Sass February 22, 2017

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

Request or provide clarification »

Examples

Sass
.element {@include ratio(16, 9);}
Was this page helpful? Yes No


    A feedback message is required to submit this form.


    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    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.
    }