Gerillass
v2.1.0* You can call mixins with or without the gls- namespace (e.g. @include gls-container-query();).
The same component often has to work in a narrow sidebar and in a wide main column on the same page. A media query cannot tell those apart, because it only knows the viewport. The Container Query Sass mixin writes a @container rule, so the component responds to the width of its container instead.
It takes the same argument shapes as Breakpoint, so the two read alike: a size, two sizes for a range, or min, max, only or between followed by a size. Sizes may be a key from $map-for-breakpoints or a raw length, and a raw length is the common case here, because a container is usually narrower than the viewport.
Arguments
| Name | Type | Description |
|---|---|---|
$params… | string, number | Accepts a size, two sizes for a range, or one of min, max, only or between followed by a size. |
$name | string | Accepts a container name as a string, to query one named container rather than the nearest one. Pass it as a keyword, $name: "card". |
$name is passed as a keyword rather than by position, because container-query("card", "medium") could not be told apart from container-query("min", "medium").
Examples
The markup all of these assume: the container on the parent, the query on the child.
<div class="card">
<h2 class="title">A title that grows once its card is wide enough</h2>
</div>.card {
@include container("card");
}From a width upwards, which is the one you will reach for most.
.title {
@include container-query("min", 400px) {
font-size: 2rem;
}
}@container (min-width: 400px) {
.title {
font-size: 2rem;
}
}Up to a width.
.title {
@include container-query("max", 399px) {
font-size: 1rem;
}
}@container (max-width: 399px) {
.title {
font-size: 1rem;
}
}A range, written either with between or as two sizes. Both produce the same rule.
.title {
@include container-query("between", 300px 500px) {
color: red;
}
}
.title {
@include container-query(300px, 500px) {
color: red;
}
}@container (min-width: 300px) and (max-width: 500px) {
.title {
color: red;
}
}
@container (min-width: 300px) and (max-width: 500px) {
.title {
color: red;
}
}A predefined breakpoint name works too, resolved through $map-for-breakpoints.
.title {
@include container-query("min", "medium") {
color: red;
}
}@container (min-width: 768px) {
.title {
color: red;
}
}Naming the container you mean. Without a name the query resolves to the nearest container ancestor, which is the wrong one as soon as containers are nested.
.title {
@include container-query("min", 400px, $name: "card") {
color: red;
}
}@container card (min-width: 400px) {
.title {
color: red;
}
}What it refuses
Arguments are checked, so a wrong value stops the build with a message instead of quietly producing the wrong CSS.
.title {
@include container-query("min", 400px, 800px) {
color: red;
}
}Error: `container-query` takes one or two arguments, and was given 3. Pass a size, two sizes for a range, or one of `min`, `max`, `only` or `between` followed by a size..title {
@include container-query("min", 400px, $name: 42) {
color: red;
}
}Error: `42` is not a valid $name for `container-query`. Pass a container name as a string, such as `"card"`.