Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-container();).
A media query asks how wide the viewport is. That is the wrong question for a component that has to work in a sidebar, in a wide main column and in a grid cell on the same page. The Container Sass mixin marks an element as a query container, so Container Query can ask how wide that element is instead.
Arguments
| Name | Type | Description |
|---|---|---|
$name (null) | string | Accepts a container name as a string, such as "card", or null for an unnamed container. |
$type (inline-size) | string | Accepts inline-size, size, or normal. inline-size queries the width only, which is what almost every layout needs. |
Give the container a name when a component sits inside another container and you need to say which one you mean.
Examples
A named container. The name is what container-query targets when several containers are nested.
.card {
@include container("card");
}.card {
container-type: inline-size;
container-name: card;
}Without a name. Queries with no $name resolve to the nearest container ancestor.
.panel {
@include container;
}.panel {
container-type: inline-size;
}Querying height as well as width costs more, because the element then has to be sized independently of its content. Reach for it only when you need it.
.panel {
@include container(null, size);
}.panel {
container-type: size;
}What it refuses
Arguments are checked, so a wrong value stops the build with a message instead of quietly producing the wrong CSS.
.card {
@include container("card", sideways);
}Error: `sideways` is not a valid $type for `container`. Pass one of: inline-size, size, normal..card {
@include container(42);
}Error: `42` is not a valid $name for `container`. Pass a name as a string, such as `"card"`, or no name at all.