Press/to search

Core Concepts

Extract Utility Classes

Yogurt purely built on top of the SASS or SCSS (Sassy CSS). By using the existing Sassy @extend directive allows you to expose any Yogurt utility classes to your custom CSS.

Note: Require Sass/SCSS preprocessor to use the @extend directive. (See Using Yogurt via CLI or Create Empty Project . )


When using the @extend <selector ...> directive in your custom CSS, some unconventional rules that you need follow:

  • prefix parenthesis () is written as \(\).
  • utility class text-khaki-100 is written as .text-khaki-100.
  • pseudo class (hover)text-khaki-100 is written as .\(hover\)text-khaki-100.
  • pseudo class with responsive .(md)(hover)text-khaki-100 is written as .\(md\)\(hover\)text-khaki-100.
  • responsive (md)text-khaki-100 is written as .\(md\)text-khaki-100.


You can create new or refactor existing CSS with Yogurt utility classes,

// @file: `src/plugins.scss` in .scss
.btn {
// Yogurt utility classes

You can mix @extend with normal CSS,

.btn-large {
// Normal CSS
font-size: 2em;
padding: 1rem 1rem;

You can mix @extend with CSS Pseudo Variants,

.btn-large:hover {

You can write in full Sassy way, if you prefer the best practice,

.btn {

&:hover {

You can use above method for refactoring exiting style sheets or migrating to use the Yogurt. (See Refactoring UI).