Mixins Overview

Mixins are predefined stateful selectors used to apply styles based on conditions.

In simple words, mixins wrap styles with conditional logic.

To understand about mixins and it's processing, See Mixins Config.

Important Note

warning

If mixinConfig.resolve exists, Shilp CSS does not process mixinConfig.variants. You must handle variants inside your resolver explicitely.

Example:

the @screen mixin uses resolve, so variants from shilpConfig.extend.mixins.screen.variants are ignored.

To overcome this, either provide a custom resolver or define a separate mixin.

This section lists all built-in mixins shipped with Shilp CSS.

Mixin	Description	Documentation
`@aria`	ARIA attribute (`aria-*`) selectors	@aria
`@childs`	style child elements	@childs
`@data`	data attribute (`data-*`) selectors	@data
`@env`	styling based on environment	@env
`@form`	form element states and conditions	@form
`@match`	complex selector patterns	@match
`@motion`	respecting user motion preferences	@motion
`@screen`	responsive breakpoints and media queries	@screen
`@self`	apply styles to the element itself	@self
`@siblings`	style sibling elements	@siblings
`@state`	interactive states	@state
`@text`	text-related conditions and pseudo-selectors	@text
`@theme`	dark/light mode and custom theme	@theme