// Usage: m-0 to m-7
// Usage: p-0 to p-7
// Usage: mb-0 to mb-7
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
('0', 0),
('1', 0.125),
('2', 0.25),
('3', 0.5),
('4', 1),
('5', 2),
('6', 4),
('7', 8),
);
$positions: (
('t', 'top'),
('r', 'right'),
('b', 'bottom'),
('l', 'left')
);
@function sizeValue( $key, $value ) {
@return if( $key == 'none', 0, $value + $sizeUnit );
}
// Run through all sizes.
@each $size in $sizes {
$sizeKey: nth( $size, 1 );
$sizeValue: nth( $size, 2 );
// For all positions margin
.#{$marginKey}#{$separator}#{$sizeKey} {
margin: sizeValue( $sizeKey, $sizeValue ) !important;
}
// For all positions padding
.#{$paddingKey}#{$separator}#{$sizeKey} {
padding: sizeValue( $sizeKey, $sizeValue ) !important;
}
// For each position
@each $position in $positions {
$posKey: nth( $position, 1 );
$posValue: nth( $position, 2 );
// For each margin
.#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
margin-#{$posValue}: sizeValue( $sizeKey, $sizeValue ) !important;
}
// For each padding
.#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
padding-#{$posValue}: sizeValue( $sizeKey, $sizeValue ) !important;
}
}
}