Container query mixins

Container query mixins that take a breakpoint name or a length.

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

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

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: Container queries. The A to Z index lists every public mixin and function.

Source: tools/_container-queries.scss

Mixins

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:43

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:60

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:79

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:96

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:134

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;
}

container-type on MDN

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

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;
}

container-name on MDN

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