Skip to content

Instantly share code, notes, and snippets.

@myasseen
Forked from markhalliwell/sass-helper-classes.scss
Created February 14, 2017 09:23
Show Gist options
  • Save myasseen/7d872d8e15b99b07553702937424c6fd to your computer and use it in GitHub Desktop.
Save myasseen/7d872d8e15b99b07553702937424c6fd to your computer and use it in GitHub Desktop.
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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment