Skip to content

Instantly share code, notes, and snippets.

@bmoredrew
Created February 1, 2018 19:06
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 bmoredrew/07b175c09e3b4e46778915b04b0dc316 to your computer and use it in GitHub Desktop.
Save bmoredrew/07b175c09e3b4e46778915b04b0dc316 to your computer and use it in GitHub Desktop.
// Margin and padding classes
// -------------------------
=box-model($direction, $type, $amount, $multiplier)
.#{str-slice($type, 1, 1) + $direction}-#{$amount * $multiplier}
@if $direction == ""
#{$type}: ($amount * $multiplier + px) !important
@if $direction == "t" or $direction == "y"
#{$type}-top: ($amount * $multiplier + px) !important
@if $direction == "r" or $direction == "x"
#{$type}-right: ($amount * $multiplier + px) !important
@if $direction == "b" or $direction == "y"
#{$type}-bottom: ($amount * $multiplier + px) !important
@if $direction == "l" or $direction == "x"
#{$type}-left: ($amount * $multiplier + px) !important
@if $frow-enable-box-model-shorcuts == true
@each $type in margin, padding
$frow-box-model-directions: "", x, y, t, r, b, l
@each $direction in $frow-box-model-directions
@for $amount from 0 through 5
$multiplier: 5
+box-model($direction, $type, $amount, $multiplier)
@for $amount from 3 through 10
$multiplier: 10
+box-model($direction, $type, $amount, $multiplier)
@if $type == "margin"
.#{str-slice($type, 1, 1) + $direction}-auto
@if $direction == ""
#{$type}: auto !important
@if $direction == "t" or $direction == "y"
#{$type}-top: auto !important
@if $direction == "r" or $direction == "x"
#{$type}-right: auto !important
@if $direction == "b" or $direction == "y"
#{$type}-bottom: auto !important
@if $direction == "l" or $direction == "x"
#{$type}-left: auto !important
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment