Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-all-buttons();).
The All Buttons Sass mixin helps you target all the HTML button elements in the DOM, so you can easily apply your style rules.
Arguments
| Name | Type | Description |
|---|---|---|
$pseudo | string | Sets the pseudo-class selector for the selected button elements. Accepts the values hover, focus, active, and disabled. |
You can call the mixin at the root level of your stylesheet to target all the HTML button elements in the DOM, or call it inside a parent selector to target only its children.
Examples
Simply call the mixin at the root level of your stylesheet to target all the HTML button elements.
@include all-buttons {
background-color: teal;
color: white;
}button, [type=button], [type=reset], [type=submit] {
background-color: teal;
color: white;
}Now pass the hover value as an argument to style all the button elements when they are in the :hover state.
@include all-buttons(hover) {
background-color: crimson;
color: white;
}button:hover, [type=button]:hover, [type=reset]:hover, [type=submit]:hover {
background-color: crimson;
color: white;
}Now, let's try it again with all the possible pseudo-class selectors.
@include all-buttons {
background-color: teal;
color: white;
}
@include all-buttons(hover) {
background-color: teal;
color: white;
}
@include all-buttons(focus) {
background-color: purple;
color: white;
}
@include all-buttons(active) {
background-color: blue;
color: white;
}
@include all-buttons(disabled) {
background-color: gray;
color: black;
}button, [type=button], [type=reset], [type=submit] {
background-color: teal;
color: white;
}
button:hover, [type=button]:hover, [type=reset]:hover, [type=submit]:hover {
background-color: teal;
color: white;
}
button:focus, [type=button]:focus, [type=reset]:focus, [type=submit]:focus {
background-color: purple;
color: white;
}
button:active, [type=button]:active, [type=reset]:active, [type=submit]:active {
background-color: blue;
color: white;
}
button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled {
background-color: gray;
color: black;
}Call the mixin inside a selector to target only the button elements inside that selector.
.containing-element {
@include all-buttons {
background-color: teal;
color: white;
}
}.containing-element button, .containing-element [type=button], .containing-element [type=reset], .containing-element [type=submit] {
background-color: teal;
color: white;
}