sass-margin-padding.scss
//Padding mixin
@mixin padding($top, $right, $bottom, $left) {
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
padding-left: $left;
}
//Margin mixin
@mixin margin($top, $right, $bottom, $left) {
margin-top: $top;
margin-right: $right;
margin-bottom: $bottom;
margin-left: $left;
}
//Usage definition
@include padding(top, right, bottom, left);
@include margin(top, right, bottom, left);
//Usage 1
@include padding(1px, 2px, 3px, 4px,);
@include margin(1px, 2px, 3px, 4px);
//Output 1
// padding: 1px 2px 3px 4px;
// margin: 1px 2px 3px 4px;
//Usage 2 (with null properties)
@include padding(1px, null, 3px, 4px);
@include margin(1px, 2px, null, 4px);
//Output 2
// padding-top: 1px;
// padding-bottom: 3px;
// padding-left: 4px;
// margin-top: 1px;
// margin-right: 2px;
// margin-left: 4px;