Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
// Root Font Size Applies To HTML Element
$root-font-size : 14px;
// Body Font Size Is Refering to That Set On The HTML Element
$body-font-size : 1rem;
// Body Line Height
$body-line-height : 1.6;
// Choose Between *Baseline Height Based Spacers ( Default - true )
// or *User Defined PX/EM/REM ( false ).
$baseline-height-based-spacers : false;
// To Change The Baseline Based Spaces You Only Need Change
// The Integer On -md and -lg Which Is What The Baseline Will Be
// Multiplied By.
$baseline-md-multiple : 1.5;
$baseline-lg-multiple : 3;
// If $baseline-height-based-spacers Is Set To *false* Below
// Is Were You Declare Your User Defined Spacer Sizes
$user-defined-spacer-0 : 0;
$user-defined-spacer-std : 1em;
$user-defined-spacer-md : 2em;
$user-defined-spacer-lg : 3em;
// Lists
//
// These Lists Are Quite Good Really, Providing You Can Stick To
// A Rule Or Two You Can Get Quite Creative.
//
// List One ** Directions **
// a = all ( Shorthand Property ) eg. .selector { margin: value; }
// t = top ( Specific Property ) eg. .selector { margin-top: value; }
// r = right ( Specific Property ) eg. .selector { margin-right: value; }
// b = bottom ( Specific Property ) eg. .selector { margin-bottom: value; }
// l = left ( Specific Property ) eg. .selector { margin-left: value; }
//
// By Changing The List Item Name You ONLY Change Its Name Stamp In The
// Generated Class, They Will ALWAYS Fall In The Above Order To Reference
// The Correct Property!
$directions : a-, t-, r-, b-, l-, x-, y-;
// List Two ** Sizes **
//
// The Sizes List Reffers To Your Logic Of Spcaing I Suppose, Like Above
// There Is A Rule To Stick To.
//
// No More Than Four!
// The First Always Reffers To 0
//
// Truthfully There Is Probably Two Options Depending On Your Taste...
// $sizes : 0, std, md, lg; or...
// $sizes : 0, 1em, 2em, 3em; ( Based On Your Chosen Sizes Of Course )
//
// These List Items Have NO Affect On Any Spacing If You Give Them A Value
// Like 1em, They Are Only Used To Make The Class Name.
$sizes : none, std, md, lg;
// Margin / Padding Naming
//
// Lastly You Can Choose How You Want The Class Names That Refference
// Margin / Padding To Be Pumped Out By Changing The String In The
// Corresponding Vairiable.
$margin-class-slug : 'mar-';
$padding-class-slug : 'pad-';
//-----------------------------------------------------------------
// ** // ** GO NO FURTHER ( unless you want to ) ** // ** //
//-----------------------------------------------------------------
//-----------------------------------------------------------------
// THE IF ELSE BASELINE TRUE
//-----------------------------------------------------------------
@if $baseline-height-based-spacers == true {
$spacer-0 : 0 !global;
$spacer-std : $body-font-size * $body-line-height !global;
$spacer-md : $spacer-std * $baseline-md-multiple !global;
$spacer-lg : $spacer-std * $baseline-lg-multiple !global;
} @else {
$spacer-0 : $user-defined-spacer-0 !global;
$spacer-std : $user-defined-spacer-std !global;
$spacer-md : $user-defined-spacer-md !global;
$spacer-lg : $user-defined-spacer-lg !global;
}
//-----------------------------------------------------------------
// THE FOR IF ELSE FOR EACH IF LOOP
//-----------------------------------------------------------------
@for $prop from 1 through 2 {
$pad-mar : null;
$property : null;
@if $prop == 1 {
$pad-mar : $margin-class-slug;
$property : 'margin';
} @else {
$pad-mar : $padding-class-slug;
$property : 'padding';
}
@for $i from 1 through 5 {
$d : null;
@if $i == 1 { $i : nth($directions, 1); $d : ''; }
@if $i == 2 { $i : nth($directions, 2); $d : '-top'; }
@if $i == 3 { $i : nth($directions, 3); $d : '-right'; }
@if $i == 4 { $i : nth($directions, 4); $d : '-bottom'; }
@if $i == 5 { $i : nth($directions, 5); $d : '-left'; }
@each $s in $sizes {
.#{$pad-mar}#{$i}#{$s} {
$val : null;
@if $s == nth($sizes, 1) { $val : $spacer-0; }
@if $s == nth($sizes, 2) { $val : $spacer-std; }
@if $s == nth($sizes, 3) { $val : $spacer-md; }
@if $s == nth($sizes, 4) { $val : $spacer-lg; }
#{$property}#{$d}: #{$val};
}
}
}
@for $i from 1 through 2 {
$d : null;
$dd : null;
@if $i == 1 { $i : nth($directions, 6); $d : '-right'; $dd : '-left' }
@if $i == 2 { $i : nth($directions, 7); $d : '-top'; $dd : '-bottom'}
@each $s in $sizes {
.#{$pad-mar}#{$i}#{$s} {
$val : null;
@if $s == nth($sizes, 1) { $val : $spacer-0; }
@if $s == nth($sizes, 2) { $val : $spacer-std; }
@if $s == nth($sizes, 3) { $val : $spacer-md; }
@if $s == nth($sizes, 4) { $val : $spacer-lg; }
#{$property}#{$d}: #{$val};
#{$property}#{$dd}: #{$val};
}
}
}
}
.mar-a-none { margin: 0; }
.mar-a-std { margin: 1em; }
.mar-a-md { margin: 2em; }
.mar-a-lg { margin: 3em; }
.mar-t-none { margin-top: 0; }
.mar-t-std { margin-top: 1em; }
.mar-t-md { margin-top: 2em; }
.mar-t-lg { margin-top: 3em; }
.mar-r-none { margin-right: 0; }
.mar-r-std { margin-right: 1em; }
.mar-r-md { margin-right: 2em; }
.mar-r-lg { margin-right: 3em; }
.mar-b-none { margin-bottom: 0; }
.mar-b-std { margin-bottom: 1em; }
.mar-b-md { margin-bottom: 2em; }
.mar-b-lg { margin-bottom: 3em; }
.mar-l-none { margin-left: 0; }
.mar-l-std { margin-left: 1em; }
.mar-l-md { margin-left: 2em; }
.mar-l-lg { margin-left: 3em; }
.mar-x-none { margin-right: 0; margin-left: 0; }
.mar-x-std { margin-right: 1em; margin-left: 1em; }
.mar-x-md { margin-right: 2em; margin-left: 2em; }
.mar-x-lg { margin-right: 3em; margin-left: 3em; }
.mar-y-none { margin-top: 0; margin-bottom: 0; }
.mar-y-std { margin-top: 1em; margin-bottom: 1em; }
.mar-y-md { margin-top: 2em; margin-bottom: 2em; }
.mar-y-lg { margin-top: 3em; margin-bottom: 3em; }
.pad-a-none { padding: 0; }
.pad-a-std { padding: 1em; }
.pad-a-md { padding: 2em; }
.pad-a-lg { padding: 3em; }
.pad-t-none { padding-top: 0; }
.pad-t-std { padding-top: 1em; }
.pad-t-md { padding-top: 2em; }
.pad-t-lg { padding-top: 3em; }
.pad-r-none { padding-right: 0; }
.pad-r-std { padding-right: 1em; }
.pad-r-md { padding-right: 2em; }
.pad-r-lg { padding-right: 3em; }
.pad-b-none { padding-bottom: 0; }
.pad-b-std { padding-bottom: 1em; }
.pad-b-md { padding-bottom: 2em; }
.pad-b-lg { padding-bottom: 3em; }
.pad-l-none { padding-left: 0; }
.pad-l-std { padding-left: 1em; }
.pad-l-md { padding-left: 2em; }
.pad-l-lg { padding-left: 3em; }
.pad-x-none { padding-right: 0; padding-left: 0; }
.pad-x-std { padding-right: 1em; padding-left: 1em; }
.pad-x-md { padding-right: 2em; padding-left: 2em; }
.pad-x-lg { padding-right: 3em; padding-left: 3em; }
.pad-y-none { padding-top: 0; padding-bottom: 0; }
.pad-y-std { padding-top: 1em; padding-bottom: 1em; }
.pad-y-md { padding-top: 2em; padding-bottom: 2em; }
.pad-y-lg { padding-top: 3em; padding-bottom: 3em; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment