Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
tailwindcss-like SASS helpers
$spacings: (
xxl: 110,
xl: 80,
l: 60,
m: 40,
s: 20,
xs: 10,
xx: 8,
);
$sides: (top, right, bottom, left);
@each $sizeName, $value in $spacings {
@each $side in $sides {
.p#{str-slice($side, 0, 1)}-#{$sizeName} {
padding-#{$side}: #{$value};
}
.-m#{str-slice($side, 0, 1)}-#{$sizeName} {
margin-#{$side}: -#{$value};
}
.m#{str-slice($side, 0, 1)}-#{$sizeName} {
margin-#{$side}: #{$value};
}
}
.px-#{$sizeName} {
padding-left: #{$value};
padding-right: #{$value};
}
.py-#{$sizeName} {
padding-top: #{$value};
padding-bottom: #{$value};
}
.-mx-#{$sizeName} {
margin-left: -#{$value};
margin-right: -#{$value};
}
.-my-#{$sizeName} {
margin-top: -#{$value};
margin-bottom: -#{$value};
}
.mx-#{$sizeName} {
margin-left: #{$value};
margin-right: #{$value};
}
.my-#{$sizeName} {
margin-top: #{$value};
margin-bottom: #{$value};
}
}
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.