53 lines
No EOL
1.2 KiB
SCSS
53 lines
No EOL
1.2 KiB
SCSS
// https://github.com/jgthms/bulma/issues/451#issuecomment-331758839
|
|
|
|
$sizeUnit: rem;
|
|
$marginKey: 'm';
|
|
$paddingKey: 'p';
|
|
$separator: '-';
|
|
$sizes: (
|
|
('none', 0),
|
|
('xxs', 0.125),
|
|
('xs', 0.25),
|
|
('sm', 0.5),
|
|
('md', 1),
|
|
('lg', 2),
|
|
('xl', 4),
|
|
('xxl', 8),
|
|
);
|
|
$positions: (
|
|
('t', ('top')),
|
|
('r', ('right')),
|
|
('b', ('bottom')),
|
|
('l', ('left')),
|
|
('x', ('right', 'left')),
|
|
('y', ('top', 'bottom'))
|
|
);
|
|
|
|
@function sizeValue($key, $value) {
|
|
@return if($key == 'none', 0, $value + $sizeUnit);
|
|
}
|
|
|
|
@each $size in $sizes {
|
|
$sizeKey: nth($size, 1);
|
|
$sizeValue: nth($size, 2);
|
|
.#{$marginKey}#{$separator}#{$sizeKey} {
|
|
margin: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
.#{$paddingKey}#{$separator}#{$sizeKey} {
|
|
padding: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
@each $position in $positions {
|
|
$posKey: nth($position, 1);
|
|
$posValue: nth($position, 2);
|
|
.#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
|
|
@each $entry in $posValue {
|
|
margin-#{$entry}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
}
|
|
.#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
|
|
@each $entry in $posValue {
|
|
padding-#{$entry}: sizeValue($sizeKey, $sizeValue);
|
|
}
|
|
}
|
|
}
|
|
} |