{"id":23014857,"url":"https://github.com/pierreburel/sass-resolution","last_synced_at":"2025-04-02T17:43:27.951Z","repository":{"id":34187222,"uuid":"38039723","full_name":"pierreburel/sass-resolution","owner":"pierreburel","description":"Sass mixin to target high density screens.","archived":false,"fork":false,"pushed_at":"2017-04-20T13:31:41.000Z","size":3,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-26T05:21:24.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierreburel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-25T09:13:48.000Z","updated_at":"2019-08-13T19:22:04.000Z","dependencies_parsed_at":"2022-09-09T15:12:25.530Z","dependency_job_id":null,"html_url":"https://github.com/pierreburel/sass-resolution","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-resolution","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-resolution/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-resolution/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreburel%2Fsass-resolution/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreburel","download_url":"https://codeload.github.com/pierreburel/sass-resolution/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246863917,"owners_count":20846335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T11:10:15.924Z","updated_at":"2025-04-02T17:43:27.931Z","avatar_url":"https://github.com/pierreburel.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Resolution\n\nSass mixin to target high density screens.  \n\nDemo: [Sassmeister](http://sassmeister.com/gist/fd61ca5e9ebde7996d84)\n\nCompatibility: Sass 3.2+ and LibSass\n\n---\n\n## Install\n\nDownload [`_resolution.scss`](https://raw.githubusercontent.com/pierreburel/sass-resolution/master/_resolution.scss) or install with [Bower](http://bower.io/) or [npm](https://www.npmjs.com/):\n\n### Bower\n\n```\nbower install sass-resolution\n```\n\n### npm\n\n```\nnpm install sass-resolution\n```\n\n---\n\n## Usage\n\nImport `_resolution.scss` and use the `resolution` mixin.\n\nYou 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).\n\nYou can set the default resolution by changing `$resolution-default`.\n\n### SCSS\n\n```scss\n@import \"resolution\";\n\n.example {\n  @include resolution {\n    content: \"default\";\n  }\n  @include resolution(2dppx) {\n    content: \"2dppx\";\n  }\n  @include resolution(192dpi) {\n    content: \"192dpi\";\n  }\n  @include resolution(1.5) {\n    content: \"1.5\";\n  }\n  @include resolution(3dppx) {\n    content: \"3dppx\";\n  }\n  @include resolution(2.5) {\n    content: \"2.5\";\n  }\n  @include resolution(240dpi) {\n    content: \"240dpi\";\n  }\n  @include resolution(retina) {\n    content: \"retina\";\n  }\n  @include resolution(hdpi) {\n    content: \"hdpi\";\n  }\n  @include resolution(xhdpi) {\n    content: \"xhdpi\";\n  }\n  @include resolution(xxhdpi) {\n    content: \"xxhdpi\";\n  }\n  @include resolution(3x) {\n    content: \"3x\";\n  }\n  @include resolution(\"@3x\") {\n    content: \"@3x\";\n  }\n  @include resolution(150%) {\n    content: \"150%\";\n  }\n}\n```\n\n### CSS\n\n```css\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .example {\n    content: \"default\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .example {\n    content: \"2dppx\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .example {\n    content: \"192dpi\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {\n  .example {\n    content: \"1.5\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .example {\n    content: \"3dppx\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {\n  .example {\n    content: \"2.5\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi) {\n  .example {\n    content: \"240dpi\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .example {\n    content: \"retina\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {\n  .example {\n    content: \"hdpi\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n  .example {\n    content: \"xhdpi\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .example {\n    content: \"xxhdpi\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .example {\n    content: \"3x\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {\n  .example {\n    content: \"@3x\";\n  }\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {\n  .example {\n    content: \"150%\";\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fsass-resolution","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreburel%2Fsass-resolution","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreburel%2Fsass-resolution/lists"}