{"id":30145248,"url":"https://github.com/grawl/sass-media-resolution","last_synced_at":"2025-08-11T08:12:01.213Z","repository":{"id":21837348,"uuid":"25160417","full_name":"Grawl/sass-media-resolution","owner":"Grawl","description":"Media Queries Resolution feature Sass polyfill","archived":false,"fork":false,"pushed_at":"2016-07-31T04:41:11.000Z","size":7,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-11T03:59:41.723Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Grawl.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-13T13:47:07.000Z","updated_at":"2018-06-01T13:14:21.000Z","dependencies_parsed_at":"2022-07-25T13:02:00.285Z","dependency_job_id":null,"html_url":"https://github.com/Grawl/sass-media-resolution","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Grawl/sass-media-resolution","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fsass-media-resolution","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fsass-media-resolution/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fsass-media-resolution/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fsass-media-resolution/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Grawl","download_url":"https://codeload.github.com/Grawl/sass-media-resolution/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grawl%2Fsass-media-resolution/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269850366,"owners_count":24485177,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-08-11T08:11:57.467Z","updated_at":"2025-08-11T08:12:01.185Z","avatar_url":"https://github.com/Grawl.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# media-resolution.sass\n\n\u003e I created this library before Autoprefixer handle `resolution` rule, and now I just removed prefixes from Sass code and don't want to rewrite a whole readme.\n\n### Media Queries Resolution feature Sass polyfill\n\nIf you want to engage your stylesheet with “retina-ready” images (actually `hdpi` or `xhdpi`) with `@2x` size for example you need to wrap your style with a huge `@media` query:\n\n```css\n@media print,\n\t(-webkit-min-device-pixel-ratio: 1.5), // For WebKit/Blink\n\t(min--moz-device-pixel-ratio: 1.5), // For old Firefox\n\t(-o-min-device-pixel-ratio: 3 / 2), // For old Opera\n\t(min-device-pixel-ratio: 1.5), // Old unprefixed syntax\n\t(min-resolution: 144dpi), // Actual\n\t(min-resolution: 1.5dppx) { // Future\n    .image {\n      background-image: url(\"image@2x.png\");\n      }\n```\n\nLooking bad, do you?\n\nI suggest a better way to do this: for anything you do with stylesheets there is a **Sass mixin!** *Or Ruby Sass extension, if you are CSS geek. Or Grunt/Gulp task.*\n\n## Using\n\n```sass\n+screen-xhdpi\n\tbackground-image: url('image@2x.png')\n```\n\nWill return you this CSS:\n\n```css\n@media print, (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {\n\t.image {\n\t\tbackground-image: url(\"image@2x.png\"); }\n```\n\nRemember that `xhdpi` is like Retina in Android terminology and equals to `2dppx`/`144dpi`.\n\n### Or you can use it harder:\n\n```sass\n+max-resolution(2)\n\t.image\n\t\tbackground-image: url('image@2x.png')\n```\n\n### Or even harder with loops:\n\n```sass\n@each $prefix, $dppx in ((max, 1), (min, 1.1))\n    .image\n        +resolution($prefix, $dppx)\n            $dppx: ceil($dppx)\n            background-image: url('image@'+$dppx+'x.png')\n```\n\nSee `tests/` for more information about how it works.\n\n## Available mixins\n\nName | Purpose\n---|---\n`=resolution($prefix, $dppx)` | Base mixin to omit prefixes and browser specificities\n`=min-resolution($dppx)` | Predefined `+resolution` mixin with `$prefix: min`\n`=max-resolution($dppx)` | Predefined `+resolution` mixin with `$prefix: max`\n`=screen-mdpi` | Predefined `+min-resolution` mixin with `$dppx: $resolution-mdpi` (1)\n`=screen-hdpi` | Predefined `+min-resolution` mixin with `$dppx: $resolution-hdpi` (1.5)\n`=screen-xhdpi` | Predefined `+min-resolution` mixin with `$dppx: $resolution-xhdpi` (2.0)\n\nAll mixins are predefined for ease of use.\n\nIf you want to use more predefined things such as `+max-resolution` predeterminations with all resolutions – you are welcome to PR or just add an issue.\n\n### Variables\n\nImportant part of a whole system is resolution variables based on [Google's specification](http://developer.android.com/guide/practices/screens_support.html):\n\n```sass\n$resolution-mdpi: 1\n$resolution-hdpi: 1.5\n$resolution-xhdpi: 2.0\n```\n\n## Install via Bower\n\n```bash\nbower install --save sass-media-resolution\n```\n\nImport the Sass file:\n\n```sass\n@import bower_components/sass-media-resolution/media-resolution.sass\n```\n\nOr use your favorite build system to do this. Like [klei/grunt-injector](https://github.com/klei/grunt-injector), see how it works at [larsonjj/generator-yeogurt](https://github.com/larsonjj/generator-yeogurt/blob/65477167a5c11545a3193fc6c836ae730af21350/app/templates/grunt/config/util/injector.js#L95), I hope you can tell me how to include automatically all my Bower-installed Sass extensions.\n\n## Test\n\nSimply `cd` to `test/` folder and run a regular Sass compiler:\n\n```bash\nsass test.sass test.css\n```\n\nOr do it with your favorite Sass tool like [CodeKit](http://incident57.com/codekit/), [Prepros](http://alphapixels.com/prepros/), [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass), [gulp-ruby-sass](https://github.com/sindresorhus/gulp-ruby-sass) or anything else.\n\n## Reference\n\n- There is an issue [#122](https://github.com/postcss/autoprefixer/issues/122) on Autoprefixer that depends on Can I Use database update. When it will be updated, this repository will not needed anymore for those who using Autoprefixer. But we need to wait. I hate waiting.\n- [PPI Calculator](https://www.sven.de/dpi/) – if you want to know how much `ppi` you screen have.\n\n## Thanks\n\n- Thank you [David Lindkvist](https://gist.github.com/ffdead) for [SASS resolution media query mixin](https://gist.github.com/ffdead/4215169), this repository based on his gist.\n- Thank you [Andrey Sitnik](https://github.com/ai) for [Autoprefixer](https://github.com/postcss/autoprefixer), my work are inspired by first early releases of your great tool that breaks the chains of prefixes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrawl%2Fsass-media-resolution","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrawl%2Fsass-media-resolution","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrawl%2Fsass-media-resolution/lists"}