Skip to content

Instantly share code, notes, and snippets.

@kevinthompson
Created December 16, 2012 19:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinthompson/4311772 to your computer and use it in GitHub Desktop.
Save kevinthompson/4311772 to your computer and use it in GitHub Desktop.
SASS Border Shorthand Mixin
// Border Shorthand
// -------------------------
=border($border: false, $border_horizontal: false, $border_bottom: false, $border_left: false)
$args: length($border)
// Reset Variables Based on Argument Count
@if $args > 1 and length(nth($border,1)) > 1 or nth($border,1) == none
@if $args == 4
$border_left: nth($border, 4)
$border_bottom: nth($border, 3)
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
@else if $args == 3
$border_bottom: nth($border, 3)
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
@else if $args == 2
$border_horizontal: nth($border, 2)
$border: nth($border, 1)
// Assign Attributes from Variables
@if $border and $border_horizontal and $border_bottom and $border_left
border-top: $border
border-right: $border_horizontal
border-bottom: $border_bottom
border-left: $border_left
@else if $border and $border_horizontal and $border_bottom
border: $border_horizontal
border-top: $border
border-bottom: $border_bottom
@else if $border and $border_horizontal
border: $border
border-right: $border_horizontal
border-left: $border_horizontal
@else
border: $border
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment