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.

@extend

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.

Examples

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

// @file: `src/_plugins.scss` in .scss
.btn {
  @extend
    // Yogurt utility classes
    .px-2,
    .py-1,
    .text-lg,
    .text-white,
    .font-semibold,
    .bg-khaki-500,
    .\(hover\)bg-khaki-700,
    .border,
    .border-khaki-600,
    .rounded,
    .shadow,
    .cursor-pointer;
}

You can mix @extend with normal CSS,

.btn-large {
  @extend
    .font-semibold,
    .text-khaki-700,
    .bg-khaki-600,
    .rounded-lg;
  // Normal CSS
  font-size: 2em;
  padding: 1rem 1rem;
}

You can mix @extend with CSS Pseudo Variants,

.btn-large:hover {
  @extend
    .text-white,
    .bg-khaki-400,
    .shadow;
}

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

.btn {
  @extend
    .bg-khaki-600;

  &:hover {
    @extend
      .bg-khaki-700,
      .shadow-lg;
  }
}

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