Gerillass: Before Sass Mixin

Before

Type: Mixin

@include before();

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

The Before Sass mixin helps you generate content or a style element before the actual content of the selected element or elements.

Name	Type	Description
`$content`	string	You can pass content as a string, or fetch a value using a custom property such as `data-content`.

When you want to fetch a value using a custom property, the name of the property must start with the 'data-' prefix. See the examples for more.

Simply pass a value as a string.

Sass

.element{
  @include before("Text to use!");
}

CSS

.element::before {
  content: "Text to use!";
}

You can target the ::before pseudo-element on its own and pass a declaration block.

Sass

.element{
  @include before{
    content: "Easy to use!";
    font-style: italic;
    color: red;
  };
}

CSS

.element::before {
  content: "Easy to use!";
  font-style: italic;
  color: red;
}

You can fetch a value using a custom property. One important thing to remember is that the name of the property must start with the 'data-' prefix.

HTML

<div class="element" data-currency="
quot;>200</div>

Sass

.element{
  @include before("data-currency");
}

CSS

.element::before {
  content: attr(data-currency);
}

Result

You can pass a value for the CSS content property as a string, and a declaration block between the opening and closing curly braces.

Sass

.element{
  @include before("data-currency"){
    font-size: .8em;
    color: red;
  };
}

CSS

.element::before {
  content: attr(data-currency);
  font-size: 0.8em;
  color: red;
}