Refactoring UI is a tedious job for frontend developers. Yogurt was designed to solve this problem in a very simple way. Here you will understand some basics of how to refactor (migrate) the existing style sheets or CSS framework you use in your project with Yogurt.
We will be using the
@extend directive to extract the Yogurt utility classes and replacing the existing CSS properties of your style sheet. (See Extract Utility Classes).
<img src="..." class="card-img-top">
We use the
@extend directive to expose the Yogurt utility classes to replacing the existing selectors CSS properties, look like the below,
// after refactoring with Yogurt in `.scss` existing file.