SASS Various

_helpers.scss

/* -------------------------------------------------------

	Creates margin and padding helper classes
	Based on bootstrap 4's spacing helpers

	Samples:
	--------
	.pt-3 {
		padding: 3rem;
	}
	.mx-4 {
		margin-left: 2rem;
		margin-right: 2rem;
	}

------------------------------------------------------- */

$spacer: 1rem;
$spacers: (
	0: 0,
	1: $spacer * 0.25,
	2: $spacer * 0.5,
	3: $spacer * 1,
	4: $spacer * 2,
	5: $spacer * 3
);

$dirs: (
	t: "top",
	r: "right",
	b: "bottom",
	l: "left"
);

$atts: (
	m: "margin",
	p: "padding"
);

/*
	spacing helpers
----------------------------------------------------*/

// loop: margin & padding
@each $att-key, $att-val in $atts {

	// loop: top, right, bottom, left directions
	@each $dir-key, $dir-val in $dirs {
	
		// loop: spacing values
		@each $sp-key, $sp-val in $spacers {
			.#{$att-key}#{$dir-key}-#{$sp-key} {
				#{$att-val}-#{$dir-val}: #{$sp-val};
			}
		}
	}
	
	// loop: spacing values for all, vertical, horizontal
	@each $sp-key, $sp-val in $spacers {
		.#{$att-key}-#{$sp-key} {
			#{$att-val}: #{$sp-val};
		}
		.#{$att-key}x-#{$sp-key} {
			#{$att-val}-left: #{$sp-val};
			#{$att-val}-right: #{$sp-val};
		}
		.#{$att-key}y-#{$sp-key} {
			#{$att-val}-top: #{$sp-val};
			#{$att-val}-bottom: #{$sp-val};
		}
	}
}