Gerillass

v2.1.0

Escape to Parent

Type: Mixin
@include escape-to-parent();

* You can call mixins with or without the gls- namespace (e.g. @include gls-escape-to-parent();).

The Escape to Parent Sass mixin allows you to escape to the parent element and use multiple class or id selectors with it. This makes it easy to control how the selected child elements respond in different cases.

Arguments

NameTypeDescription
$selectorstring (quoted)Accepts a value as a class or id selector.

Note that you have to use a quoted string!

Examples

Call the mixin once for each case you want the element to respond to, and pass the matching argument each time.

Sass
.parent-element{
  .element{
    @include escape-to-parent(".smartphone"){
      background-color: red;
    }
    @include escape-to-parent(".desktop"){
      background-color: green;
    }
  }
}
CSS
.smartphone.parent-element .element {
  background-color: red;
}

.desktop.parent-element .element {
  background-color: green;
}