Gerillass
v2.1.0Type: Mixin
@include screen-agent();
* 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.
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 numeric value with dpi or dpcm units. |
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;
}
}