apply() mixin

The apply() mixin: every WovenUI mixin by name in one call, with state and breakpoint modifiers.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: apply(). The A to Z index lists every public mixin and function.

Source: mixins-map.scss

Mixins

apply

apply mixin

Applies WovenUI mixins by name in one call; each item may be followed by one state (hover, focus) and one breakpoint (sm, md, lg), which wrap it in &:state (group-hover: .group:hover &) and media-up().

Modifiers come after the mixin, state and breakpoint in either order: bg(gray, 100) hover lg or bg(gray, 100) lg hover. A modifier must be a configured breakpoint or a supported state: hover, focus, focus-visible, focus-within, active, visited, disabled, enabled, checked, required, invalid, valid, placeholder-shown, read-only, first-child, last-child, only-child, first-of-type, last-of-type, empty, target, group-hover. An unknown modifier, or more than one breakpoint or state, raises an error. Output order does not follow the written order: items without a modifier first, then state items, then each breakpoint from the smallest up with its state items; states follow the LVHA order (first-child, last-child, only-child, first-of-type, last-of-type, empty, target, visited, checked, placeholder-shown, required, valid, invalid, read-only, group-hover, focus-within, hover, focus, focus-visible, active, enabled, disabled), so flex md, hide gives the same CSS as hide, flex md and focus beats hover. Plain-text items (namespaced use) get numeric arguments as real numbers (12px, 250ms). Items of keys and words are cached; items with raw values go in a size-capped cache, so repeated raw values are parsed once and unique ones do not slow later calls.

@mixin apply($mixins...)

Parameter	Type	Default	Description
$mixins	Any	Required	Mixin calls such as p(4), bg(brand) hover or flex md; a mixin without arguments is written bare (flex, transition)

Example 1

.card {
  @include apply(p(4), bg(surface), rounded(md), shadow(md) hover, p(6) md);
}

Compiled CSS

.card {
  padding: var(--wu-space-4);
  background-color: var(--wu-bg-surface);
  border-radius: var(--wu-radius-md);
}
.card:hover {
  box-shadow: var(--wu-shadow-md);
}
@media (min-width: 768px) {
  .card {
    padding: var(--wu-space-6);
  }
}

Example 2

.button {
  @include apply(px(4), bg(brand), bg(brand-hover) hover, text-color(on-brand), transition);
}

Compiled CSS

.button {
  padding-inline: var(--wu-space-4);
  background-color: var(--wu-brand);
  color: var(--wu-text-on-brand);
  transition-property: all;
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
}
.button:hover {
  background-color: var(--wu-brand-hover);
}

See also: media-up. Source: mixins-map.scss:20