Screen Agent

Type: Mixin

@include screen-agent();

* You can call mixins with or without gls- namespace (e.g. @include gls-screen-agent();).

Screen Agent Sass mixin helps you to target elements based on the various screen resolutions.

Suppose you have two types of photos loading on your site: one for the normal screens, the other one is twice in size for the retina screens. In such cases, you may want to use this mixin.

Github Source Code

Arguments

Name	Type	Description
`$resolution`	`string, number (with unit)`	Accepts only one argument and three different values which targets the screen resolution: `1x`, `2x` and `3x`. Or you can pass a custom numeric value with `dpi` and `dpcm` units.

* The string values must be wrapped with the quotation signs.

Examples

Based on the assumption 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);
  }
}

//CSS Output
.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;
  }
}

//CSS Output
.element {
  background-color: green;
}
@media (min-resolution: 192dpi) {
  .element {
    background-color: teal;
  }
}