Remove

Type: Mixin

@include remove();

* You can call mixins with or without gls- namespace (e.g. @include gls-remove();).

Remove Sass mixin is to help you to set the display CSS property of an element to none, and it combines it with CSS media queries to show or hide an element in the document flow based on the various device widths.

Tip: The usage is very similar to Breakpoint mixin. Accepts the same arguments as it is.

Github Source Code

Arguments

Name	Type	Description
`$value`	`number (with unit)`	Sets the width value to which your styles will be applied.
`$mode`	`string`	Sets the `width` media feature. Accepts `only`, `min`, `max` or `between` values.

Examples

Simply call the mixin and pass the width value for which you want the selected element to remove from the documen layout.

.element{
  @include remove(500px);
}

//CSS Output
@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);
}

//CSS Output
@media (min-width: 500px) and (max-width: 1024px) {
  .element {
    display: none;
  }
}

You can use $mode options to set the width media feature. Accepts only, min, max or between values.

.element{
  @include remove(min, 1200px);
}

//CSS Output
@media (min-width: 1200px) {
  .element {
    display: none;
  }
}

You can use predefined breakpoint values which are: xsmall, small, medium, large, xlarge.

.element{
  @include remove(max, medium);
}

//CSS Output
@media (max-width: 768px) {
  .element {
    display: none;
  }
}

You can set a range by using predefined values as well!

.element{
  @include remove(small, medium);
}

//CSS Output
@media (min-width: 576px) and (max-width: 767px) {
  .element {
    display: none;
  }
}