Border Box
Type:
Mixin
@include
border-box();
* You can call mixins with or without
gls- namespace (e.g. @include gls-border-box();).Border Box Sass mixin sets the box-sizing CSS property value to
border-box for selected HTML element(s). Thus the padding and the border will be inside of the selected element.Arguments
| Name | Type | Description |
|---|---|---|
$value | string | Accepts |
* Please check out the links at the end of the page to learn more about Box Sizing
Examples
If you call the mixin in a selector with no value passed the style rules will be applied to this very element and all the children in it.
.element {
@include border-box;
}//CSS Output
.element,
.element::before,
.element::after,
.element *,
.element *::before,
.element *::after {
box-sizing: border-box;
}Pass the only value as an argument to apply the style rules to only to the selected element.
.element {
@include border-box("only");
}//CSS Output
.element,
.element::before,
.element::after {
box-sizing: border-box;
}Call the mixin at the root of your stylesheet to target all the HTML elements.
@include border-box;//CSS Output
*,
*::before,
*::after {
box-sizing: border-box;
}