Antialias

Arguments

NameTypeDescription
$valuestring

Accepts only value. It is used only when it wants to be applied for one specific HTML element.

* Please check out the links at the end of the page for more information about Font Smoothing.

Examples

If you call it in a selector with no value passed the style rules will be applied to this very element and all its children.

.element{
  @include antialias;
}
//CSS Output
.element, .element:before, .element:after,
.element *,
.element *::before,
.element *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Pass the only value as an argument to apply the style rules to only one specific HTML element.

.element{
  @include antialias(only);
}
//CSS Output
.element, .element::before, .element::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Call the mixin at the root of your stylesheet to target all the HTML elements.

@include antialias;
//CSS Output
*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}