Skip to content

Instantly share code, notes, and snippets.

@AllThingsSmitty
Last active August 29, 2015 14:02
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 AllThingsSmitty/2e51aba6f4a53a36df5b to your computer and use it in GitHub Desktop.
Save AllThingsSmitty/2e51aba6f4a53a36df5b to your computer and use it in GitHub Desktop.
A way to add an border/outline to an element without affecting its final dimensions
// default values:
$ibThickness: 2px !default;
$ibColor: black !default;
$ibAlpha: .1 !default;
// use a "variable argument" to accept any number of values.
@mixin ib($values...) {
$borderThickness: $ibThickness;
$borderColor: $ibColor;
$borderAlpha: $ibAlpha;
@each $value in $values {
@if type_of($value) == number {
@if unit($value) == "" {
$borderAlpha: $value;
}
@else {
// no need to limit this length to just "px"
$borderThickness: $value;
}
}
@else if type_of($value) == color {
$borderColor: $value;
}
}
box-shadow: inset 0 0 0 $borderThickness rgba($borderColor, $borderAlpha);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment