Gerillass
v2.1.0Type: Mixin
@include border-box();
* You can call mixins with or without the gls- namespace (e.g. @include gls-border-box();).
The Border Box Sass mixin sets the box-sizing CSS property to border-box for the selected HTML elements. This keeps the padding and the border inside the element.
Arguments
| Name | Type | Description |
|---|---|---|
$value | string | Accepts the only value. Use it when you want to apply the styles to one specific HTML element. |
Please check out the links at the end of the page to learn more about box sizing.
Examples
If you call the mixin inside a selector without passing a value, the style rules apply to that element and all of its children.
.element {
@include border-box;
}.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 only to the selected element.
.element {
@include border-box("only");
}.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;*,
*::before,
*::after {
box-sizing: border-box;
}