GatsbyCentral/gatsby-v2-starter-lumen

/**
 * Margin
 */

@mixin margin-top($number) {
    margin-top: #{ $number * $typographic-leading + "px"};
}

@mixin margin-bottom($number) {
    margin-bottom: #{ $number * $typographic-leading + "px"};
}

@mixin margin($top, $right, $bottom:null, $left:null) {
    @if $left==null and $bottom==null {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"};
    }
    @else if $left==null or $left==$right {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"};
    }
    @else {
        margin: #{ $top * $typographic-leading + "px"} #{ $right * $typographic-leading + "px"} #{ $bottom * $typographic-leading + "px"} #{ $left * $typographic-leading + "px"};
    }
}