Before

Type: Mixin

@include before();

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

Before Sass mixin helps you to generate some content or a style element before the actual content of a selected element(s).

Github Source Code

Arguments

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

* When you want to fetch a given value by using custom property the name of the property must start with ‘data-’ prefix. For more please see the examples.

Examples

Simply pass a value as a string.

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

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

You can only target the ::before pseudo-element and then pass a decleration block.

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

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

You can fetch a given value by using custom property. One thing important to remember here is the name of the property must start with ‘data-’ prefix.

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

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

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

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

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

//CSS Output
.element::before {
  content: attr(data-currency);
  font-size: .8em;
  color: red;
}