Skip to content

Instantly share code, notes, and snippets.

@Gioni06 Gioni06/utility.scss
Created Nov 17, 2019

Embed
What would you like to do?
"padding" and "margin" utility classes with SCSS
$space: 0.25rem;
// position shortcuts.
$positions: 'x', 'y', 't', 'b', 'l', 'r';
// range multiplier
$ranges: 1, 2, 3, 4, 5, 6, 7, 8, 'auto';
@function autoOrValue($sp, $ra) {
@if($ra == 'auto') {
@return 'auto';
} @else {
@return $sp * $ra;
}
}
/*
Create padding utility classes: px-1; px-2 ...
*/
@each $p in $positions {
@each $r in $ranges {
.p#{$p}-#{$r} {
@if $p == 'x' {
padding-left: autoOrValue($space, $r);
padding-right: autoOrValue($space, $r);
}
@if $p == 'y' {
padding-top: autoOrValue($space, $r);
padding-bottom: autoOrValue($space, $r);
}
@if $p == 't' {
padding-top: autoOrValue($space, $r);
}
@if $p == 'b' {
padding-bottom: autoOrValue($space, $r);
}
@if $p == 'l' {
padding-left: autoOrValue($space, $r);
}
@if $p == 'r' {
padding-right: autoOrValue($space, $r);
}
}
}
}
/* No position indication. Apply on every position */
@each $r in $ranges {
.p-#{$r} {
padding: autoOrValue($space, $r);
}
}
/*
Create margin utility classes: mx-1; mx-2 ...
*/
@each $p in $positions {
@each $r in $ranges {
.m#{$p}-#{$r} {
@if $p == 'x' {
margin-left: autoOrValue($space, $r);
margin-right: autoOrValue($space, $r);
}
@if $p == 'y' {
margin-top: autoOrValue($space, $r);
margin-bottom: autoOrValue($space, $r);
}
@if $p == 't' {
margin-top: autoOrValue($space, $r);
}
@if $p == 'b' {
margin-bottom: autoOrValue($space, $r);
}
@if $p == 'l' {
margin-left: autoOrValue($space, $r);
}
@if $p == 'r' {
margin-right: autoOrValue($space, $r);
}
}
}
}
/* No position indication. Apply on every position */
@each $r in $ranges {
.m-#{$r} {
margin: autoOrValue($space, $r);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.