Skip to content

Instantly share code, notes, and snippets.

@mllrjb
Created January 7, 2017 21:10
Show Gist options
  • Save mllrjb/b074e02b7054986faea3cf7d72ae982c to your computer and use it in GitHub Desktop.
Save mllrjb/b074e02b7054986faea3cf7d72ae982c to your computer and use it in GitHub Desktop.
Sass border utility
/*
Borders
- - - - - - - - - - - - - - - - - - - - - - - - -
Helper classes for adding borders to elements
Class names follow this convention:
.[type][direction][size]
* type: `border` for the border styling attribute
* direction: `v` for vertical, `h` for horizontal, `t` for top, `l` for left etc.
* size: `+` for large, `++` for huge (none for default)
Examples:
* `b++` will give you a huge (`++`) border (`border`)
* `bb0` will give you zero border (`m`) on the bottom (`b`)
* `bv+` will give you a large (`+`) vertical (`v`) borders (`m`)
*/
@mixin generate-directions($class-prefix, $class-postfix, $property, $size) {
.#{$class-prefix}#{$class-postfix} { #{$property}: $size !important; }
.#{$class-prefix}h#{$class-postfix} { #{$property}-left: $size !important; #{$property}-right: $size !important;}
.#{$class-prefix}v#{$class-postfix} { #{$property}-top: $size !important; #{$property}-bottom: $size !important;}
.#{$class-prefix}t#{$class-postfix} { #{$property}-top: $size !important;}
.#{$class-prefix}b#{$class-postfix} { #{$property}-bottom: $size !important;}
.#{$class-prefix}l#{$class-postfix} { #{$property}-left: $size !important;}
.#{$class-prefix}r#{$class-postfix} { #{$property}-right: $size !important;}
}
// generates all sizes for the specified property
@mixin generate-border-classes($class-prefix, $size) {
$size-large: $size * 2;
$size-huge: $size * 4;
@include generate-directions(#{$class-prefix}b, null, border, $size solid);
@include generate-directions(#{$class-prefix}b, \+, border, $size-large solid);
@include generate-directions(#{$class-prefix}b, \+\+, border, $size-huge solid);
@include generate-directions(#{$class-prefix}b, 0, border, 0);
}
@include generate-border-classes(null, 1px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment