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).