Gerillass
v2.1.0Type: Mixin
@include remove();
* 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.
Arguments
| Name | Type | Description |
|---|---|---|
$value | number (with unit) | Sets the width value at which your styles will be applied. |
$mode | string | Sets the width media feature. Accepts the values only, min, max, and between. |
Examples
Simply call the mixin and pass the width at which you want the selected element removed from the document layout.
.element{
@include remove(500px);
}@media (width: 500px) {
.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;
}
}You can use the $mode option to set the width media feature. It accepts the values only, min, max, and between.
.element{
@include remove(min, 1200px);
}@media (min-width: 1200px) {
.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;
}
}