Skip to content

Instantly share code, notes, and snippets.

@pajcho
Created January 27, 2021 12:17
Show Gist options
  • Save pajcho/2fdc0b5131852acc7c70545cd11c8dd0 to your computer and use it in GitHub Desktop.
Save pajcho/2fdc0b5131852acc7c70545cd11c8dd0 to your computer and use it in GitHub Desktop.
// You can paste this into https://www.sassmeister.com/ to get the desired output and test it in browser
// ----------------------------------------------------------
// Variables
// ----------------------------------------------------------
$class-prefix: 'dib';
$breakpoints: (
768px: sm,
992px: md,
1200px: lg,
);
$props: (
margin: m,
padding: p,
);
$spacer-default: 1rem;
$spacers: (
0: 0,
1: $spacer-default * 0.25,
2: $spacer-default * 0.5,
3: $spacer-default * 1,
4: $spacer-default * 1.5,
5: $spacer-default * 3,
auto: auto,
);
// ----------------------------------------------------------
// Spacing mixins
// ----------------------------------------------------------
//-- spacing-common --//
@mixin spacing-common-utilities {
@each $prop, $prop-abbrv in $props {
@each $spacer, $spacer-value in $spacers {
// to avoid adding padding auto
@if ($spacer != auto or $prop != 'padding') {
.#{$class-prefix}-#{$prop-abbrv}-#{$spacer} {
#{$prop}: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}t-#{$spacer} {
#{$prop}-top: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}r-#{$spacer} {
#{$prop}-right: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}b-#{$spacer} {
#{$prop}-bottom: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}l-#{$spacer} {
#{$prop}-left: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}x-#{$spacer} {
#{$prop}-right: $spacer-value !important;
#{$prop}-left: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}y-#{$spacer} {
#{$prop}-top: $spacer-value !important;
#{$prop}-bottom: $spacer-value !important;
}
}
}
}
}
//-- spacing-responsive --//
@mixin spacing-responsive-utilities {
@each $breakpoint, $breakpoint-abbrv in $breakpoints {
@media (min-width: $breakpoint) {
@each $prop, $prop-abbrv in $props {
@each $spacer, $spacer-value in $spacers {
// to avoid adding padding auto
@if ($spacer != auto or $prop != 'padding') {
.#{$class-prefix}-#{$prop-abbrv}-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}t-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-top: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}r-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-right: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}b-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-bottom: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}l-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-left: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}x-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-right: $spacer-value !important;
#{$prop}-left: $spacer-value !important;
}
.#{$class-prefix}-#{$prop-abbrv}y-#{$breakpoint-abbrv}-#{$spacer} {
#{$prop}-top: $spacer-value !important;
#{$prop}-bottom: $spacer-value !important;
}
}
}
}
}
}
}
// ----------------------------------------------------------
// Call the mixins to generate the classes
// ----------------------------------------------------------
@include spacing-common-utilities;
@include spacing-responsive-utilities;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment