Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
SASS Helper Classes
// Helper classes.
@each $property in (border, margin, padding) {
@each $direction in ('', -left, -right, -top, -bottom) {
.#{$property}#{$direction} {
@if $property == border {
#{$property}#{$direction}: 1px solid $gray-lighter;
@else {
#{$property}#{$direction}: 1em;
@if $direction == -top {
&:not(.no-first):first-of-type {
#{$property}#{$direction}: 0;
@else if $direction == -bottom {
&:not(.no-last):last-of-type {
#{$property}#{$direction}: 0;
.no-#{$property}#{$direction} {
#{$property}#{$direction}: 0;
&.important {
#{$property}#{$direction}: 0 !important;

This comment has been minimized.

Copy link
Owner Author

markcarver commented Jan 27, 2015

This creates the following classes, all of which can add a prefix of no- which would instead set the property to 0.


Class Property
border border: 1px solid $gray-lighter;
border-left border-left: 1px solid $gray-lighter;
border-right border-right: 1px solid $gray-lighter;
border-top border-top: 1px solid $gray-lighter;
border-bottom border-bottom: 1px solid $gray-lighter;


Class Property
margin margin: 1em;
margin-left margin-left: 1em;
margin-right margin-right: 1em;
margin-top margin-top: 1em;
margin-bottom margin-bottom: 1em;


Class Property
padding padding: 1em;
padding-left padding-left: 1em;
padding-right padding-right: 1em;
padding-top padding-top: 1em;
padding-bottom padding-bottom: 1em;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.