Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-screen-agent();).
The Screen Agent Sass mixin helps you target elements based on different screen resolutions.
Suppose you have two types of photos loading on your site: one for normal screens, and another one at twice the size for retina screens. In cases like that, you may want to use this mixin.
Arguments
| Name | Type | Description |
|---|---|---|
$resolution | string,<br/>number (with unit) | Accepts one argument with three possible values that target the screen resolution: 1x, 2x, and 3x. You can also pass a custom resolution in dpi, dpcm, dppx or x. A bare number, a length and a negative resolution are refused, because the query they produce never matches. It cannot be a custom property: var() is not evaluated in a @media condition, and the mixin refuses it. |
String values must be wrapped in quotation marks.
Examples
Based on the case above, we can give the following example.
.element{
background-image: url(https://sample-site.com/images/sample-image-1920x1080.jpg);
@include screen-agent("2x"){
background-image: url(https://sample-site.com/images/sample-image-3840x2160.jpg);
}
}.element {
background-image: url(https://sample-site.com/images/sample-image-1920x1080.jpg);
}
@media (min-resolution: 192dpi) {
.element {
background-image: url(https://sample-site.com/images/sample-image-3840x2160.jpg);
}
}Now, let's try it with a custom value.
.element{
background-color: green;
@include screen-agent(192dpi){
background-color: teal;
}
}.element {
background-color: green;
}
@media (min-resolution: 192dpi) {
.element {
background-color: teal;
}
}What it refuses
A resolution no condition can match stops the build. Measured in Chrome 152, (min-resolution: 2), (min-resolution: 10px) and (min-resolution: -1dppx) are kept by the browser and never apply, and until 2.3.1 the mixin wrote them without a word.
.element {
@include screen-agent(2) {
color: red;
}
}Error: `2` is not a valid $resolution for `screen-agent`: `(min-resolution: 2)` would never match. Pass `1x`, `2x`, `3x`, or a resolution such as `2dppx`, `192dpi` or `38dpcm`.