_margins.scss

// =============================
// Enable Private Variables
// =============================

$_margins-enable:          true !default;
$_viewport-margins-enable: true !default;

// =============================
// Global Margin Utility Helper Classes
// =============================

//
// Un-namespaced Classes are to be used globally when an elements spacing is consistant across all viewports.
// Example Use - class="mar-r-2x".
//

@if ($_margins-enable) {
	@include generate-spacing-batch("margin");
}

// =============================
// Viewport Margin Utility Helper Attributes
// =============================

//
// Core Viewport Margin Utility Helper Attributes are generated via the below mixin to create attributes for certain viewports.
// The advantage to this, is it allows margins to be added to a certain element specifically for a breakpoint which you have defined.
// Example Use - data-desk="mar-r-2x" data-palm="mar-r-0".
//

//
// Attribute Name Key
// -t- = Top
// -b- = Bottom
// -l- = Left
// -r- = Right
// -e- = Ends  (Top & Bottom)
// -s- = Sides (Left & Right)
//

@if ($_viewport-margins-enable) {
	@each $viewport, $viewport-val in $viewport-values {

	  // Attributes only apply once certain breakpoint is triggered.

		@include media-query($from: nth($viewport-val, 1),
		                     $to:   nth($viewport-val, 2)) {
			@include generate-spacing-batch("margin", $namespace: $viewport);
		}

	}
}