Generating responsive utility classes with sass

README-Utility-Classes.md

🎯 Responsive Utility Classes with SASS/SCSS

✨ For this demo utility classes are generated only for padding. But the possibilities are endless; using this demo you can extend it even further as much as you want.

👨‍💻 The classes are named using the format {property}{sides}-{size} for default (xs) and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl. To enable responsive utility just put "responsive": true for that particular property. e.g. The classes are, .p-5, .p-sm-5, .p-md-5, .p-lg-5, p-xl-5, .p-xxl-5 and so on.

Classes follow a 5-grid structure.

.p-* = 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,.... and etc. 
* = 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50 in 'px'

_breakpoints.scss

// Media Query Mixins
$breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px,
);

// @include breakpoint-min(lg) { ... }
@mixin breakpoint-min($size) {
	@if $size == sm {
		@media (min-width: map-get($map: $breakpoints, $key: 'sm')) {
			@content;
		}
	} @else if $size == md {
		@media (min-width: map-get($map: $breakpoints, $key: 'md')) {
			@content;
		}
	} @else if $size == lg {
		@media (min-width: map-get($map: $breakpoints, $key: 'lg')) {
			@content;
		}
	} @else if $size == xl {
		@media (min-width: map-get($map: $breakpoints, $key: 'xl')) {
			@content;
		}
	} @else if $size == xxl {
		@media (min-width: map-get($map: $breakpoints, $key: 'xxl')) {
			@content;
		}
	} @else {
		@media (min-width: #{$size}px) {
			@content;
		}
	}
}

// @include breakpoint-max(md) { ... }
@mixin breakpoint-max($size) {
	@if $size == sm {
		@media (max-width: (map-get($map: $breakpoints, $key: 'sm') - 0.02)) {
			@content;
		}
	} @else if $size == md {
		@media (max-width: (map-get($map: $breakpoints, $key: 'md') - 0.02)) {
			@content;
		}
	} @else if $size == lg {
		@media (max-width: (map-get($map: $breakpoints, $key: 'lg') - 0.02)) {
			@content;
		}
	} @else if $size == xl {
		@media (max-width: (map-get($map: $breakpoints, $key: 'xl') - 0.02)) {
			@content;
		}
	} @else if $size == xxl {
		@media (max-width: (map-get($map: $breakpoints, $key: 'xxl') - 0.02)) {
			@content;
		}
	} @else {
		@media (max-width: #{$size}px) {
			@content;
		}
	}
}

// @include breakpoint-minmax(md, lg) { ... }
@mixin breakpoint-minmax($sizemin, $sizemax) {
	@if ($sizemin == 'sm' and $sizemax == 'md') {
		@media (min-width: map-get($map: $breakpoints, $key: 'sm')) and (max-width: (map-get($map: $breakpoints, $key: 'md') - 0.02)) {
			@content;
		}
	} @else if ($sizemin == 'md' and $sizemax == 'lg') {
		@media (min-width: map-get($map: $breakpoints, $key: 'md')) and (max-width: (map-get($map: $breakpoints, $key: 'lg') - 0.02)) {
			@content;
		}
	} @else if ($sizemin == 'lg' and $sizemax == 'xl') {
		@media (min-width: map-get($map: $breakpoints, $key: 'lg')) and (max-width: (map-get($map: $breakpoints, $key: 'xl') - 0.02)) {
			@content;
		}
	} @else if ($sizemin == 'xl' and $sizemax == 'xxl') {
		@media (min-width: map-get($map: $breakpoints, $key: 'xl')) and (max-width: (map-get($map: $breakpoints, $key: 'xxl') - 0.02)) {
			@content;
		}
	} @else {
		@media (min-width: #{$sizemin}px) and (max-width: #{$sizemax}px) {
			@content;
		}
	}
}

_utilities.scss

@import './breakpoints';

/* Generating Responsive Utility Classes with SASS/SCSS */

// spacing
$base: 5px !default;

$spacing: (
	"0": 0,
	"1": $base * 1,
	"2": $base * 2,
	"3": $base * 3,
	"4": $base * 4,
	"5": $base * 5,
	"6": $base * 6,
	"7": $base * 7,
	"8": $base * 8,
	"9": $base * 9,
	"10": $base * 10,
	"11": $base * 11,
	"12": $base * 12
);

$utilities: (
	'padding': (
		'prefix': 'p',
		'values': $spacing,
		'responsive': true,
	),
	'padding-inline': (
		'prefix': 'px',
		'values': $spacing,
		'responsive': true,
	),
	'padding-block': (
		'prefix': 'py',
		'values': $spacing,
		'responsive': true,
	),
	'padding-block-start': (
		'prefix': 'pt',
		'values': $spacing,
		'responsive': true,
	),
	'padding-inline-end': (
		'prefix': 'pe',
		'values': $spacing,
		'responsive': true,
	),
	'padding-block-end': (
		'prefix': 'pb',
		'values': $spacing,
		'responsive': true,
	),
	'padding-inline-start': (
		'prefix': 'ps',
		'values': $spacing,
		'responsive': true,
	),
);

// Media Query Mixins
$screenSizes: (sm, md, lg, xl, xxl);

// Generate Utility Classes
@each $property, $map in $utilities {
	$prefix: map-get($map, 'prefix');
	$values: map-get($map, 'values');
	$responsive: map-get($map, 'responsive');

	@each $k, $v in $values {
		@if ($k == 'default') {
			.#{$prefix} {
				#{$property}: #{$v};
			}
		} @else {
			.#{$prefix}-#{$k} {
				#{$property}: #{$v};
			}
		}
		// Responsive
		@if $responsive == true {
			@each $b in $screenSizes {
				@include breakpoint-min($b) {
					@if ($k == 'default') {
						.#{$prefix}-#{$b} {
							#{$property}: #{$v} !important;
						}
					} @else {
						.#{$prefix}-#{$b}-#{$k} {
							#{$property}: #{$v} !important;
						}
					}
				}
			}
		}
	}
}