New

Uniform CSS has now been officially released!
Read more


Helper Mixins

Get started with built-in helper mixins.


About Helper Mixins

Helper mixins allow you to conveniently add useful blocks of CSS with a simple syntax.


Screen Mixin

The screen() mixin wraps the content around a @media rule.

.element {
@include screen(lg) {
background: red;
}
}
@media (min-width: 1280px) {
.element {
background: red;
}
}

Apply Mixin Beta

The apply() mixin allows you to apply properties directly using shorthand utility class names. Behind the scene, it parses through the list of arguments and extends placeholder selectors that match the name.

.element {
@include apply(
'mb-24',
'hover.mb-32',
'p-20',
'bg-white',
)
}

To enable this feature, placeholders must be set to true in your configuration. This will generate Sass placeholder selectors for each property on compilation.

@use "uniform" as * with (
$config: (
placeholders: true,
)
);