Skip to main content

Apply Mixin

The apply mixin is NuvoUI's secret weapon - giving you the convenience of utility-first CSS with the clean output of traditional Sass.

Developer Choice

With NuvoUI, you decide how to work: directly with utility classes in HTML or through mixins in your Sass files.

Configuration​

The apply mixin works with NuvoUI's configuration system:

Parent Selector​

The parent selector prefix can be configured globally:

Utility Class Generation​

You can enable or disable utility class generation:

Breakpoints​

Responsive variants are based on these breakpoint values:

How It Works​

The apply mixin lets you use utility-style syntax in your Sass files, keeping your HTML cleaner while maintaining the power and flexibility of utilities:

Instead of writing this in your HTML:

You can write cleaner, more semantic HTML:

CSS Output Optimization​

One of the biggest advantages of the apply mixin is the optimized CSS output it generates:

Traditional Utility Classes​

Apply Mixin Output​

Bundle Size Matters

Using the apply mixin can significantly reduce your CSS bundle size compared to including all utility classes, especially for larger projects.

Responsive Variants with Apply​

The apply mixin supports responsive variants using the breakpoint name suffix:

No CLI, No JS, Just SCSS​

NuvoUI lets you freely mix both approaches - use utility classes for rapid prototyping and one-off adjustments, then refactor to the apply mixin for components you reuse.

When to Use Apply​

Use Utility Classes When:

  • Prototyping and iterating quickly
  • Building one-off components
  • Making small adjustments to existing elements
  • Working with designers who prefer direct visual tweaks

Use Apply Mixin When:

  • Building reusable components
  • Creating more semantic HTML
  • Reducing CSS bundle size
  • Working with component-based frameworks
  • Maintaining larger design systems

Opting Out of Utility Classes​

If you prefer to use only the apply mixin and want to completely opt out of generating utility classes to minimize your CSS size, you can do so using NuvoUI's configuration:

Using Only Mixins

When you disable utility class generation, your CSS output will be significantly smaller as it will only contain the specific styles you've applied through mixins.

Advanced Usage​

Combining with Variables​

The apply mixin works seamlessly with Sass variables for even more dynamic styling:

Conditional Styling​

You can combine the apply mixin with Sass control directives:

Pro Tip

The apply mixin lets you build a design system that grows with your project. Start with utility classes for rapid development, then refactor into apply-based components as patterns emerge.

State Modifiers​

The apply mixin supports pseudo-class state modifiers like hover and focus:

Responsive​