src/assets/scss/mixins/_margin.scss
@import "../variables";
@mixin margin-auto($number: 0) {
margin: #{$number * $typographic-leading + "px"} auto;
}
@mixin margin-left($number) {
margin-left: #{$number * $typographic-leading + "px"};
}
@mixin margin-right($number) {
margin-right: #{$number * $typographic-leading + "px"};
}
@mixin margin-top($number) {
margin-top: #{$number * $typographic-leading + "px"};
}
@mixin margin-bottom($number) {
margin-bottom: #{$number * $typographic-leading + "px"};
}
@mixin margin-equal($number) {
margin: #{$number * $typographic-leading + "px"};
}
@mixin margin($top, $right, $bottom: null, $left: null) {
@if not $left and not $bottom {
margin:
#{$top * $typographic-leading + "px"}
#{$right * $typographic-leading + "px"};
} @else if not $left 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"};
}
}