Permalink
Fetching contributors…
Cannot retrieve contributors at this time
168 lines (134 sloc) 4.21 KB
// Generate inline class names for your elements
//
// <div class="actions inset-vert-small-large">
// <button type="submit">Totes click me!</button>
// </div>
//
// Padding
// ---------------
// pad-{item} : pad-small (padding: 10px)
// pad-vert-{item}-{item + 1} : pad-vert-small-large (padding: 10px 0 40px 0)
// pad-horz-{item}-{item + 1} : pad-horz-small-large (padding: 0 10px 0 40px)
//
// Margin
// ---------------
// inset-{item} : inset-small (margin: 10px)
// inset-vert-{item}-{item + 1} : inset-vert-small-large (margin: 10px 0 40px 0)
// inset-horz-{item}-{item + 1} : inset-horz-small-large (margin: 0 10px 0 40px)
//
// Offset margin
// ---------------
// offset-{item} : offset-small (margin: -10px)
// offset-vert-{item}-{item + 1} : offset-vert-small-large (margin: -10px 0 -40px 0)
// offset-horz-{item}-{item + 1} : offset-horz-small-large (margin: 0 -10px 0 -40px)
@mixin spacing-classes($base: 10px, $list: small normal medium large){
@for $i from 1 through length($list) {
.pad-#{nth(unquote($list), $i)} {
padding: ($base * $i);
}
.inset-#{nth(unquote($list), $i)} {
margin: ($base * $i);
}
.offset-#{nth(unquote($list), $i)} {
margin: (-($base * $i));
}
.pad-top-#{nth(unquote($list), $i)} {
padding-top: ($base * $i);
}
.pad-right-#{nth(unquote($list), $i)} {
padding-right: ($base * $i);
}
.pad-bottom-#{nth(unquote($list), $i)} {
padding-bottom: ($base * $i);
}
.pad-left-#{nth(unquote($list), $i)} {
padding-left: ($base * $i);
}
.inset-top-#{nth(unquote($list), $i)} {
margin-top: ($base * $i);
}
.inset-right-#{nth(unquote($list), $i)} {
margin-right: ($base * $i);
}
.inset-bottom-#{nth(unquote($list), $i)} {
margin-bottom: ($base * $i);
}
.inset-left-#{nth(unquote($list), $i)} {
margin-left: ($base * $i);
}
.outset-top-#{nth(unquote($list), $i)} {
margin-top: (-($base * $i));
}
.outset-right-#{nth(unquote($list), $i)} {
margin-right: (-($base * $i));
}
.outset-bottom-#{nth(unquote($list), $i)} {
margin-bottom: (-($base * $i));
}
.outset-left-#{nth(unquote($list), $i)} {
margin-left: (-($base * $i));
}
.inset-#{nth(unquote($list), $i)} {
margin: ($base * $i);
}
.offset-#{nth(unquote($list), $i)} {
margin: (-($base * $i));
}
.pad-vert-#{nth(unquote($list), $i)} {
padding-top: ($base * $i);
padding-bottom: ($base * $i);
}
.pad-horz-#{nth(unquote($list), $i)} {
padding-right: ($base * $i);
padding-left: ($base * $i);
}
.inset-vert-#{nth(unquote($list), $i)} {
margin-top: ($base * $i);
margin-bottom: ($base * $i);
}
.inset-horz-#{nth(unquote($list), $i)} {
margin-right: ($base * $i);
margin-left: ($base * $i);
}
.offset-vert-#{nth(unquote($list), $i)} {
margin-top: (-($base * $i));
margin-bottom: (-($base * $i));
}
.offset-horz-#{nth(unquote($list), $i)} {
margin-right: (-($base * $i));
margin-left: (-($base * $i));
}
@for $j from 1 through length($list) {
@if ($i != $j) {
.pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
padding-top: ($base * $i);
padding-bottom: ($base * $j);
}
.pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
padding-right: ($base * $i);
padding-left: ($base * $j);
}
.inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
margin-top: ($base * $i);
margin-bottom: ($base * $j);
}
.inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
margin-right: ($base * $i);
margin-left: ($base * $j);
}
.offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
margin-top: (-($base * $i));
margin-bottom: (-($base * $j));
}
.offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
margin-right: (-($base * $i));
margin-left: (-($base * $j));
}
}
}
}
}
// @include spacing-classes();
// @include spacing-classes($base: 5px);
// @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest);
// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest);