Sass mixin to target high density screens.
CSS
Latest commit 8fa1aab Jan 27, 2017 @pierreburel committed on GitHub Create LICENSE.md
Permalink
Failed to load latest commit information.
LICENSE.md Create LICENSE.md Jan 27, 2017
README.md First release Jun 25, 2015
_resolution.scss First release Jun 25, 2015
bower.json First release Jun 25, 2015
package.json First release Jun 25, 2015
sache.json First release Jun 25, 2015

README.md

Resolution

Sass mixin to target high density screens.

Demo: Sassmeister

Compatibility: Sass 3.2+ and LibSass


Install

Download _resolution.scss or install with Bower or npm:

Bower

bower install sass-resolution

npm

npm install sass-resolution

Usage

Import _resolution.scss and use the resolution mixin.

You can set the resolution by using different notations and units : pixel-ratio (2, 2x or @2x), dppx (2dppx), dpi (192dpi), percentage (200%) or presets like retina (Apple) and xhdpi (Android).

You can set the default resolution by changing $resolution-default.

SCSS

@import "resolution";

.example {
  @include resolution {
    content: "default";
  }
  @include resolution(2dppx) {
    content: "2dppx";
  }
  @include resolution(192dpi) {
    content: "192dpi";
  }
  @include resolution(1.5) {
    content: "1.5";
  }
  @include resolution(3dppx) {
    content: "3dppx";
  }
  @include resolution(2.5) {
    content: "2.5";
  }
  @include resolution(240dpi) {
    content: "240dpi";
  }
  @include resolution(retina) {
    content: "retina";
  }
  @include resolution(hdpi) {
    content: "hdpi";
  }
  @include resolution(xhdpi) {
    content: "xhdpi";
  }
  @include resolution(xxhdpi) {
    content: "xxhdpi";
  }
  @include resolution(3x) {
    content: "3x";
  }
  @include resolution("@3x") {
    content: "@3x";
  }
  @include resolution(150%) {
    content: "150%";
  }
}

CSS

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "default";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "2dppx";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "192dpi";
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "1.5";
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "3dppx";
  }
}

@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {
  .example {
    content: "2.5";
  }
}

@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {
  .example {
    content: "240dpi";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "retina";
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "hdpi";
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .example {
    content: "xhdpi";
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "xxhdpi";
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "3x";
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .example {
    content: "@3x";
  }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .example {
    content: "150%";
  }
}