Tool and theme mixins

apply() itself, the media and container query helpers, preference and feature queries, and the theme and tooltip mixins. See Media queries and Container queries for guides.

This page is generated from the doc blocks in the core source when the site is built, so it always matches the current release of @nuvoui/core. Every example is compiled against core during the build; open Compiled CSS under an example to see its output. The A to Z index lists every public mixin and function.

Tooltips

components/_tooltips.scss

tooltip-variables

`tooltip-variables` mixin

Emits the tooltip component variables (--nu-tooltip--{Name}); the bubble uses text-regular as background and text-inverted as text, so it contrasts with the page in both themes.

@mixin tooltip-variables

Output: --nu-tooltip--* custom properties for colours, z-index, transition, typography, widths and radius

Example

.help-panel {
  @include tooltip-variables;
  --nu-tooltip--WidthLarge: 320px;
}

Compiled CSS

.help-panel {
  --nu-tooltip--Background: var(--nu-text-regular);
  --nu-tooltip--ShadowColor: rgb(0 0 0 / 20%);
  --nu-tooltip--Color: var(--nu-text-inverted);
  --nu-tooltip--ZIndex: var(--nu-z-tooltip);
  --nu-tooltip--TransitionDuration: var(--nu-duration-200);
  --nu-tooltip--TransitionTimingFunction: var(--nu-ease-in-out);
  --nu-tooltip--TransitionDelay: 0s;
  --nu-tooltip--FontSize: var(--nu-font-size-sm);
  --nu-tooltip--FontWeight: normal;
  --nu-tooltip--TextTransform: none;
  --nu-tooltip--WidthSmall: 80px;
  --nu-tooltip--WidthMedium: 150px;
  --nu-tooltip--WidthLarge: 260px;
  --nu-tooltip--BorderRadius: var(--nu-radius-xs);
  --nu-tooltip--WidthLarge: 320px;
}

Note. Already emitted on :root (or $parent-selector) when the tooltips feature is enabled; include it again only to reset a scope. The theme blocks re-declare the two colour variables, so tooltips inside a data-theme section take that section's colours.

Source: components/_tooltips.scss:47

Mixins map

mixins-map.scss

apply

`apply` mixin

Applies NuvoUI 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().

@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(--nu-space-4);
  background-color: var(--nu-bg-surface);
  border-radius: var(--nu-radius-md);
}
.card:hover {
  box-shadow: var(--nu-shadow-md);
}
@media (min-width: 768px) {
  .card {
    padding: var(--nu-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(--nu-space-4);
  background-color: var(--nu-brand);
}
.button:hover {
  background-color: var(--nu-brand-hover);
}
.button {
  color: var(--nu-text-on-brand);
  transition-property: all;
  transition-duration: var(--nu-duration-200);
  transition-timing-function: var(--nu-ease-in-out);
}

Note. Modifiers come after the mixin, state before breakpoint: bg(gray, 100) hover lg. 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. 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.

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

Theme

themes/_theme.scss

dark-theme

`dark-theme` mixin

Emits the dark theme token custom properties (--nu-*), including computed text-on-{role} and the error aliases of danger.

@mixin dark-theme

Output: --nu-* theme token declarations with the dark values (built-in defaults merged with $dark-theme)

Example

.dark-preview {
  @include dark-theme;
}

Compiled CSS

.dark-preview {
  --nu-bg-base: #1a1a1a;
  --nu-bg-surface: #2e2e2e;
  --nu-bg-alternate: #242424;
  --nu-bg-raised: #3a3a3a;
  --nu-bg-hover: #3a3a3a;
  --nu-bg-selected: var(--nu-brand-950);
  --nu-bg-disabled: #333;
  --nu-text-regular: #f1f1f1;
  --nu-text-muted: #a8a8a8;
  --nu-text-subtle: #6e6e6e;
  --nu-text-inverted: #1a1a1a;
  --nu-text-link: var(--nu-brand-300);
  --nu-text-link-hover: var(--nu-brand-200);
  --nu-border-regular: #474747;
  --nu-border-strong: var(--nu-gray-500);
  --nu-border-control: var(--nu-gray-400);
  --nu-border-control-hover: var(--nu-gray-300);
  --nu-border-focus: var(--nu-brand-400);
  --nu-border-focus-width: 2px;
  --nu-border-focus-offset: 2px;
  --nu-brand: var(--nu-brand-400);
  --nu-brand-hover: var(--nu-brand-300);
  --nu-brand-active: var(--nu-brand-200);
  --nu-brand-subtle: var(--nu-brand-950);
  --nu-brand-border: var(--nu-brand-800);
  --nu-text-brand: var(--nu-brand-300);
  --nu-success: var(--nu-success-400);
  --nu-success-hover: var(--nu-success-300);
  --nu-success-active: var(--nu-success-200);
  --nu-success-subtle: var(--nu-success-950);
  --nu-success-border: var(--nu-success-800);
  --nu-text-success: var(--nu-success-300);
  --nu-danger: var(--nu-danger-400);
  --nu-danger-hover: var(--nu-danger-300);
  --nu-danger-active: var(--nu-danger-200);
  --nu-danger-subtle: var(--nu-danger-950);
  --nu-danger-border: var(--nu-danger-800);
  --nu-text-danger: var(--nu-danger-300);
  --nu-warning: var(--nu-warning-400);
  --nu-warning-hover: var(--nu-warning-300);
  --nu-warning-active: var(--nu-warning-200);
  --nu-warning-subtle: var(--nu-warning-950);
  --nu-warning-border: var(--nu-warning-800);
  --nu-text-warning: var(--nu-warning-300);
  --nu-info: var(--nu-info-400);
  --nu-info-hover: var(--nu-info-300);
  --nu-info-active: var(--nu-info-200);
  --nu-info-subtle: var(--nu-info-950);
  --nu-info-border: var(--nu-info-800);
  --nu-text-info: var(--nu-info-300);
  --nu-gray-subtle: var(--nu-gray-950);
  --nu-gray-border: var(--nu-gray-800);
  --nu-text-gray: var(--nu-gray-300);
  --nu-red-subtle: var(--nu-red-950);
  --nu-red-border: var(--nu-red-800);
  --nu-text-red: var(--nu-red-300);
  --nu-blue-subtle: var(--nu-blue-950);
  --nu-blue-border: var(--nu-blue-800);
  --nu-text-blue: var(--nu-blue-300);
  --nu-green-subtle: var(--nu-green-950);
  --nu-green-border: var(--nu-green-800);
  --nu-text-green: var(--nu-green-300);
  --nu-yellow-subtle: var(--nu-yellow-950);
  --nu-yellow-border: var(--nu-yellow-800);
  --nu-text-yellow: var(--nu-yellow-300);
  --nu-purple-subtle: var(--nu-purple-950);
  --nu-purple-border: var(--nu-purple-800);
  --nu-text-purple: var(--nu-purple-300);
  --nu-pink-subtle: var(--nu-pink-950);
  --nu-pink-border: var(--nu-pink-800);
  --nu-text-pink: var(--nu-pink-300);
  --nu-text-on-brand: #1a1a1a;
  --nu-text-on-success: #1a1a1a;
  --nu-text-on-danger: #1a1a1a;
  --nu-text-on-warning: #1a1a1a;
  --nu-text-on-info: #1a1a1a;
  --nu-error: var(--nu-danger);
  --nu-error-hover: var(--nu-danger-hover);
  --nu-error-active: var(--nu-danger-active);
  --nu-error-subtle: var(--nu-danger-subtle);
  --nu-error-border: var(--nu-danger-border);
  --nu-text-error: var(--nu-text-danger);
  --nu-text-on-error: var(--nu-text-on-danger);
  --nu-tooltip--Background: var(--nu-text-regular);
  --nu-tooltip--Color: var(--nu-text-inverted);
}

Note. The theme already emits these under [data-theme="dark"] and the prefers-color-scheme fallback; use this for a custom scope.

See also: dark-mode. Source: themes/_theme.scss:107

Accessibility

tools/_accessibility.scss

prefers-dark dark-mode reduced-motion high-contrast

`prefers-dark` mixin

Wraps styles in a prefers-color-scheme: dark media query, following the OS setting only (data-theme is ignored).

@mixin prefers-dark

Content block: Styles to apply when the OS prefers a dark colour scheme

Example

.logo {
  @include prefers-dark {
    filter: invert(1);
  }
}

Compiled CSS

@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1);
  }
}

See also: dark-mode. Source: tools/_accessibility.scss:30

`dark-mode` mixin

Applies styles where the dark theme tokens resolve: on and under the elements a dark-valued theme block matches (data-theme="dark", data-theme="inverse" on a light page, a nested inverse section, and :root without data-theme when the OS is dark), stopping at a nested data-theme section that resolves light.

@mixin dark-mode

Content block: Styles to apply in dark mode
Output: One @scope rule per colour scheme condition, rooted at the elements whose theme tokens are dark and bounded by nested data-theme sections. Nothing when $enable-dark-mode is false. At the top level the content applies to those dark elements, and rules nested in it to their descendants

Example

.card {
  @include dark-mode {
    box-shadow: none;
  }
}

Compiled CSS

@media not all and (prefers-color-scheme: dark) {
  @scope ([data-theme="dark"], [data-theme="inverse"]:not([data-theme="dark"] *, [data-theme="inverse"] *), [data-theme="dark"] [data-theme="inverse"] [data-theme="inverse"]) to ([data-theme="light"], [data-theme="dark"], [data-theme="inverse"]) {
    .card:scope, .card:is(:scope *) {
      box-shadow: none;
    }
  }
}
@media (prefers-color-scheme: dark) {
  @scope ([data-theme="dark"], :root:not([data-theme]), :root:not([data-theme]) [data-theme="inverse"] [data-theme="inverse"], [data-theme="inverse"]:not([data-theme="dark"] *, [data-theme="inverse"] *, :root:not([data-theme]) *), [data-theme="dark"] [data-theme="inverse"] [data-theme="inverse"]:not(:root:not([data-theme]) *)) to ([data-theme="light"], [data-theme="dark"], [data-theme="inverse"]) {
    .card:scope, .card:is(:scope *) {
      box-shadow: none;
    }
  }
}

Note. Uses CSS @scope (Chrome 118, Safari 17.4, Firefox 146); a browser without @scope ignores the dark-mode styles.

See also: prefers-dark, dark-theme. Source: tools/_accessibility.scss:48

`reduced-motion` mixin

Wraps styles in a prefers-reduced-motion: reduce media query.

@mixin reduced-motion

Content block: Styles to apply when the user asks for reduced motion

Example

.spinner {
  @include reduced-motion {
    animation: none;
  }
}

Compiled CSS

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

Source: tools/_accessibility.scss:89

`high-contrast` mixin

Wraps styles in a forced-colors: active media query (Windows high contrast and other forced colour modes).

@mixin high-contrast

Content block: Styles to apply when the browser forces a limited colour palette

Example

.button {
  @include high-contrast {
    border: 1px solid ButtonText;
  }
}

Compiled CSS

@media (forced-colors: active) {
  .button {
    border: 1px solid ButtonText;
  }
}

Source: tools/_accessibility.scss:104

Container queries

tools/_container-queries.scss

container-up container-down container-between container-only container-query container-type container-name

`container-up` mixin

Applies styles when the container is at least the given breakpoint width (min-width container query).

@mixin container-up($breakpoint, $containerName: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints (xs, sm, md, lg, xl, 2xl) or a length such as 400px; a unitless number that is not a name raises an error
`$containerName`	`String\|Null`	`null`	Container name to query; null queries the nearest container

Content block: Styles to apply at and above the breakpoint

Example

.card-title {
  @include container-up(md, sidebar) {
    font-size: 1.25rem;
  }
}

Compiled CSS

@container sidebar (min-width: 768px) {
  .card-title {
    font-size: 1.25rem;
  }
}

See also: container-down, container-between, container-only. Source: tools/_container-queries.scss:35

`container-down` mixin

Applies styles when the container is narrower than the given breakpoint (max-width of the breakpoint minus 0.02px).

@mixin container-down($breakpoint, $containerName: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints or a length
`$containerName`	`String\|Null`	`null`	Container name to query; null queries the nearest container

Content block: Styles to apply below the breakpoint

Example

.card-actions {
  @include container-down(sm) {
    flex-direction: column;
  }
}

Compiled CSS

@container (max-width: 639.98px) {
  .card-actions {
    flex-direction: column;
  }
}

See also: container-up. Source: tools/_container-queries.scss:53

`container-between` mixin

Applies styles when the container width is from the lower breakpoint up to just below the upper breakpoint (upper minus 0.02px).

@mixin container-between($lower, $upper, $containerName: null)

Parameter	Type	Default	Description
`$lower`	`String\|Number`	Required	Lower breakpoint name or length (inclusive)
`$upper`	`String\|Number`	Required	Upper breakpoint name or length (exclusive)
`$containerName`	`String\|Null`	`null`	Container name to query; null queries the nearest container

Content block: Styles to apply inside the range

Example

.card-grid {
  @include container-between(sm, lg, main) {
    grid-template-columns: repeat(2, 1fr);
  }
}

Compiled CSS

@container main (min-width: 640px) and (max-width: 1023.98px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

See also: container-up, container-down. Source: tools/_container-queries.scss:72

`container-only` mixin

Applies styles only while the container is between the given breakpoint and the next larger one (minus 0.02px); the largest breakpoint has no upper limit.

@mixin container-only($breakpoint, $containerName: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints or a length in the breakpoint unit (px by default)
`$containerName`	`String\|Null`	`null`	Container name to query; null queries the nearest container

Content block: Styles to apply within that breakpoint range

Example

.card-media {
  @include container-only(md, card) {
    aspect-ratio: 4 / 3;
  }
}

Compiled CSS

@container card (min-width: 768px) and (max-width: 1023.98px) {
  .card-media {
    aspect-ratio: 4/3;
  }
}

See also: media-only. Source: tools/_container-queries.scss:90

`container-query` mixin

Applies styles when the container is at least the given width; a breakpoint name or a length resolves like container-up(), and calc() is used as is.

@mixin container-query($size, $containerName: null)

Parameter	Type	Default	Description
`$size`	`String\|Length\|Calculation`	Required	Breakpoint name from $breakpoints (xs, sm, md, lg, xl, 2xl), a length such as 400px or 30rem, or calc(); any other word or a unitless number raises an error
`$containerName`	`String\|Null`	`null`	Container name to query; null queries the nearest container

Content block: Styles to apply at and above the size

Example 1

.widget {
  @include container-query(400px, sidebar) {
    display: grid;
  }
}

Compiled CSS

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
  }
}

Example 2

.widget-title {
  @include container-query(md) {
    font-size: 1.25rem;
  }
}

Compiled CSS

@container (min-width: 768px) {
  .widget-title {
    font-size: 1.25rem;
  }
}

See also: container-up. Source: tools/_container-queries.scss:129

`container-type` mixin

Sets container-type so the element becomes a query container.

@mixin container-type($type: inline-size)

Parameter	Type	Default	Description
`$type`	`String`	`inline-size`	Container type (inline-size, size or normal)

Example

.sidebar {
  @include container-type;
}

Compiled CSS

.sidebar {
  container-type: inline-size;
}

See also: container-name. Source: tools/_container-queries.scss:147

`container-name` mixin

Sets container-name so container queries can target this container by name.

@mixin container-name($name)

Parameter	Type	Default	Description
`$name`	`String`	Required	Container name (quotes are removed)

Example

.sidebar {
  @include container-type;
  @include container-name(sidebar);
}

Compiled CSS

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

See also: container-type. Source: tools/_container-queries.scss:160

Feature support

tools/_feature-support.scss

touch fine-pointer landscape portrait display-mode

`touch` mixin

Applies styles on touch devices: no hover support and a coarse pointer.

@mixin touch

Content block: Styles for touch devices

Example

.menu-link {
  @include touch {
    padding-block: 12px;
  }
}

Compiled CSS

@media (hover: none) and (pointer: coarse) {
  .menu-link {
    padding-block: 12px;
  }
}

See also: fine-pointer. Source: tools/_feature-support.scss:15

`fine-pointer` mixin

Applies styles on devices with a precise pointer such as a mouse (pointer: fine).

@mixin fine-pointer

Content block: Styles for fine pointer devices

Example

.row-actions {
  @include fine-pointer {
    opacity: 0;
  }
}

Compiled CSS

@media (pointer: fine) {
  .row-actions {
    opacity: 0;
  }
}

See also: touch. Source: tools/_feature-support.scss:31

`landscape` mixin

Applies styles in landscape orientation ((orientation: landscape) media query, no screen and).

@mixin landscape

Content block: Styles for landscape orientation

Example

.gallery {
  @include landscape {
    grid-template-columns: repeat(3, 1fr);
  }
}

Compiled CSS

@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

See also: portrait. Source: tools/_feature-support.scss:47

`portrait` mixin

Applies styles in portrait orientation ((orientation: portrait) media query, no screen and).

@mixin portrait

Content block: Styles for portrait orientation

Example

.gallery {
  @include portrait {
    grid-template-columns: 1fr;
  }
}

Compiled CSS

@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

See also: landscape. Source: tools/_feature-support.scss:63

`display-mode` mixin

Applies styles when the page runs in the given Progressive Web App display mode.

@mixin display-mode($mode: "standalone")

Parameter	Type	Default	Description
`$mode`	`String`	`"standalone"`	Display mode (standalone, fullscreen, minimal-ui, browser)

Content block: Styles for that display mode

Example

.install-banner {
  @include display-mode(standalone) {
    display: none;
  }
}

Compiled CSS

@media (display-mode: standalone) {
  .install-banner {
    display: none;
  }
}

Source: tools/_feature-support.scss:79

Media queries

tools/_media-queries.scss

media-up media-down media-between media-only

`media-up` mixin

Applies styles from the given breakpoint width upwards (min-width media query, no screen and).

@mixin media-up($breakpoint, $debug: null)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints (xs, sm, md, lg, xl, 2xl) or a length such as 800px; a unitless number that is not a name raises an error
`$debug`	`Any`	`null`	Unused

Content block: Styles to apply at and above the breakpoint

Example

.sidebar {
  @include media-up(lg) {
    display: block;
  }
}

Compiled CSS

@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

See also: media-down, media-between, media-only. Source: tools/_media-queries.scss:21

`media-down` mixin

Applies styles below the given breakpoint (max-width of the breakpoint minus 0.02px).

@mixin media-down($breakpoint)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints or a length such as 800px

Content block: Styles to apply below the breakpoint

Example

.sidebar {
  @include media-down(md) {
    display: none;
  }
}

Compiled CSS

@media (max-width: 767.98px) {
  .sidebar {
    display: none;
  }
}

See also: media-up. Source: tools/_media-queries.scss:38

`media-between` mixin

Applies styles from the lower breakpoint up to just below the upper breakpoint (upper minus 0.02px).

@mixin media-between($lower, $upper)

Parameter	Type	Default	Description
`$lower`	`String\|Number`	Required	Lower breakpoint name or length (inclusive)
`$upper`	`String\|Number`	Required	Upper breakpoint name or length (exclusive)

Content block: Styles to apply inside the range

Example

.grid {
  @include media-between(sm, lg) {
    grid-template-columns: repeat(2, 1fr);
  }
}

Compiled CSS

@media (min-width: 640px) and (max-width: 1023.98px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

See also: media-up, media-down. Source: tools/_media-queries.scss:56

`media-only` mixin

Applies styles only between the given breakpoint and the next larger one (minus 0.02px); the largest breakpoint has no upper limit.

@mixin media-only($breakpoint)

Parameter	Type	Default	Description
`$breakpoint`	`String\|Number`	Required	Breakpoint name from $breakpoints (2xl may be unquoted) or a length in the breakpoint unit (px by default), such as 800px; a length in another unit raises an error

Content block: Styles to apply within that breakpoint range

Example

.hero {
  @include media-only(md) {
    padding-inline: 2rem;
  }
}

Compiled CSS

@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero {
    padding-inline: 2rem;
  }
}

See also: container-only. Source: tools/_media-queries.scss:78

Modern layout

tools/_modern-layout.scss

aspect-ratio dvh safe-area-inset print supports

`aspect-ratio` mixin

Sets the aspect-ratio property from a width and height (emitted as 16 / 9), a single number, auto, calc() or var(); anything else raises an error.

@mixin aspect-ratio($ratio, $height: null)

Parameter	Type	Default	Description
`$ratio`	`Number\|String\|List`	Required	Width (with $height), a ratio as text ("16/9"), list.slash(16, 9), a positive number (1.5), auto, calc() or var()
`$height`	`Number\|Null`	`null`	Height of the ratio, when $ratio is the width

Example 1

.video {
  @include aspect-ratio(16, 9); // aspect-ratio: 16 / 9
}

Compiled CSS

.video {
  aspect-ratio: 16 / 9;
}

Example 2

.thumb {
  @include apply(aspect-ratio("4/3")); // aspect-ratio: 4 / 3
}

Compiled CSS

.thumb {
  aspect-ratio: 4 / 3;
}

Note. An unquoted 16/9 is Sass division: Sass warns and passes 1.7777777778. Write aspect-ratio(16, 9) or "16/9".

Source: tools/_modern-layout.scss:70

`dvh` mixin

Sets height to 100dvh where supported and to 100vh otherwise, each inside an @supports block.

@mixin dvh

Example

.app-shell {
  @include dvh;
}

Compiled CSS

@supports (height: 100dvh) {
  .app-shell {
    height: 100dvh;
  }
}
@supports not (height: 100dvh) {
  .app-shell {
    height: 100vh;
  }
}

Source: tools/_modern-layout.scss:80

`safe-area-inset` mixin

Sets a property to the device safe area inset for one side, for notches and rounded screens.

@mixin safe-area-inset($property, $position)

Parameter	Type	Default	Description
`$property`	`String`	Required	CSS property to set, e.g. padding-top
`$position`	`String`	Required	Inset side (top, right, bottom, left); any other value raises an error

Example

.toolbar {
  @include safe-area-inset(padding-bottom, bottom); // padding-bottom: env(safe-area-inset-bottom)
}

Compiled CSS

.toolbar {
  padding-bottom: env(safe-area-inset-bottom);
}

Source: tools/_modern-layout.scss:98

`print` mixin

Wraps styles in a print media query.

@mixin print

Content block: Styles for printed output

Example

.site-nav {
  @include print {
    display: none;
  }
}

Compiled CSS

@media print {
  .site-nav {
    display: none;
  }
}

Source: tools/_modern-layout.scss:119

`supports` mixin

Wraps styles in an @supports query for the given declaration; pass it as a quoted string.

@mixin supports($property)

Parameter	Type	Default	Description
`$property`	`String`	Required	Declaration to test, e.g. "display: grid"; a value without a colon raises an error

Content block: Styles to apply when the declaration is supported

Example

.layout {
  @include supports("display: grid") {
    display: grid;
  }
}

Compiled CSS

@supports (display: grid) {
  .layout {
    display: grid;
  }
}

Source: tools/_modern-layout.scss:135

Tool and theme mixins

Tooltips

tooltip-variables mixin

Mixins map

apply mixin

Theme

dark-theme mixin

Accessibility

prefers-dark mixin

dark-mode mixin

reduced-motion mixin

high-contrast mixin

Container queries

container-up mixin

container-down mixin

container-between mixin

container-only mixin

container-query mixin

container-type mixin

container-name mixin

Feature support

touch mixin

fine-pointer mixin

landscape mixin

portrait mixin

display-mode mixin

Media queries

media-up mixin

media-down mixin

media-between mixin

media-only mixin

Modern layout

aspect-ratio mixin

dvh mixin

safe-area-inset mixin

print mixin

supports mixin

`tooltip-variables` mixin

`apply` mixin

`dark-theme` mixin

`prefers-dark` mixin

`dark-mode` mixin

`reduced-motion` mixin

`high-contrast` mixin

`container-up` mixin

`container-down` mixin

`container-between` mixin

`container-only` mixin

`container-query` mixin

`container-type` mixin

`container-name` mixin

`touch` mixin

`fine-pointer` mixin

`landscape` mixin

`portrait` mixin

`display-mode` mixin

`media-up` mixin

`media-down` mixin

`media-between` mixin

`media-only` mixin

`aspect-ratio` mixin

`dvh` mixin

`safe-area-inset` mixin

`print` mixin

`supports` mixin