Instantly share code, notes, and snippets.

Embed
What would you like to do?
Spacing extension for Bulma.io (CSS Framework)
/*
* A spacing extension to Bulma.io
*
* This extension implements rules likes:
* has-margin-none, has-padding-medium, has-margin-bottom-large, has-margin-auto
*
* The classes are built as follows (in rem):
*
* has-margin
* -(*|top|right|bottom|left)
* -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
* has-padding
* -(*|top|right|bottom|left)
* -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
* has-margin
* -(*|left|right)
* -auto
*/
$sizeUnit: rem;
$marginKey: "has-margin";
$paddingKey: "has-padding";
$separator: "-";
$spacingSizes: (
("none", 0),
("extra-small", 0.125),
("very-small", 0.25),
("small", 0.5),
("medium", 1),
("large", 2),
("very-large", 4),
("extra-large", 8)
);
$positions: (
("top", "top"),
("right", "right"),
("bottom", "bottom"),
("left", "left")
);
@function sizeValue($key, $value) {
@return if($key == "none", 0, $value + $sizeUnit);
}
@each $size in $spacingSizes {
$sizeKey: nth($size, 1);
$sizeValue: nth($size, 2);
.#{$marginKey}#{$separator}#{$sizeKey} {
margin: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$sizeKey} {
padding: sizeValue($sizeKey, $sizeValue);
}
}
@each $size in $spacingSizes {
$sizeKey: nth($size, 1);
$sizeValue: nth($size, 2);
@each $position in $positions {
$posKey: nth($position, 1);
$posValue: nth($position, 2);
.#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
.#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
}
}
}
.has-margin-auto {
margin-left: auto;
margin-right: auto;
}
.has-margin-left-auto {
margin-left: auto;
}
.has-margin-right-auto {
margin-right: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment