Skip to content

Instantly share code, notes, and snippets.

@zastrow
Created May 12, 2014 15:31
Show Gist options
  • Save zastrow/566cbff99fe1124ffda9 to your computer and use it in GitHub Desktop.
Save zastrow/566cbff99fe1124ffda9 to your computer and use it in GitHub Desktop.
Mixin that puts position offset values on one line a la padding or margin
@mixin positions($top:"auto", $right:"auto", $bottom:"auto", $left:"auto",$unit:"") {
@if ( $top != "auto" and ( $unit == "" or $unit == "rem" ) ) {
top: $top * $base-font-multiplier * 16px;
top: $top * 1rem;
} @else if ( $unit != "" and $unit != "rem" ) {
top: #{$top}#{$unit};
} @else {
top: $top;
}
@if ( $right != "auto" and ( $unit == "" or $unit == "rem" ) ) {
right: $right * $base-font-multiplier * 16px;
right: $right * 1rem;
} @else if ( $unit != "" and $unit != "rem" ) {
right: #{$right}#{$unit};
} @else {
right: $right;
}
@if ( $bottom != "auto" and ( $unit == "" or $unit == "rem" ) ) {
bottom: $bottom * $base-font-multiplier * 16px;
bottom: $bottom * 1rem;
} @else if ( $unit != "" and $unit != "rem" ) {
bottom: #{$bottom}#{$unit};
} @else {
bottom: $bottom;
}
@if ( $left != "auto" and ( $unit == "" or $unit == "rem" ) ) {
left: $left * $base-font-multiplier * 16px;
left: $left * 1rem;
} @else if ( $unit != "" and $unit != "rem" ) {
left: #{$left}#{$unit};
} @else {
left: $left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment