Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-remove();).
The Remove Sass mixin helps you set the display CSS property of an element to none. It combines that with CSS media queries to show or hide an element in the document flow at different device widths.
Tip: The usage is very similar to the Breakpoint mixin, and it accepts the same arguments.
Arguments
| Name | Type | Description |
|---|---|---|
$value | number (with unit) | The width, or a key from the breakpoint map. On its own it matches that exact width and no other, and the mixin prints a warning: pass only when that is what you mean. It cannot be a custom property: var() is not evaluated in a @media condition, so the rule would never apply, and the mixin refuses it. |
$mode | string | Sets the width media feature. Accepts the values only, min, max, and between. |
Examples
Use min to remove the element from a width upwards, and max to remove it up to a width. These are the forms you will want most of the time.
.element{
@include remove(min, 1200px);
}@media (min-width: 1200px) {
.element {
display: none;
}
}You can specify a range where you don't want the selected element to appear.
.element{
@include remove(500px, 1024px);
}@media (min-width: 500px) and (max-width: 1024px) {
.element {
display: none;
}
}One width on its own is a single pixel. remove(500px) compiles to @media (width: 500px), so the element disappears only when the viewport is exactly 500px wide, and at every other width it stays. To hide it below or above a width, pass max or min as well. Since 2.2.0 the mixin prints a warning for that form.
If you do want that exact width, only says so explicitly. It compiles to the same query as a single value, without the warning.
.element{
@include remove(only, 500px);
}@media (width: 500px) {
.element {
display: none;
}
}You can use the predefined breakpoint values, which are xsmall, small, medium, large, and xlarge.
.element{
@include remove(max, medium);
}@media (max-width: 768px) {
.element {
display: none;
}
}You can set a range by using predefined values as well!
.element{
@include remove(small, medium);
}@media (min-width: 576px) and (max-width: 767px) {
.element {
display: none;
}
}