{"id":24176932,"url":"https://github.com/danieldafoe/sassy-mixins","last_synced_at":"2025-09-20T22:31:05.347Z","repository":{"id":183377547,"uuid":"657792288","full_name":"danieldafoe/sassy-mixins","owner":"danieldafoe","description":"Sass mixins to help you respect user preferences—because you should be. Never write a _mixins.scss again.","archived":false,"fork":false,"pushed_at":"2023-06-25T21:45:29.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-31T08:51:34.615Z","etag":null,"topics":["css","helpers","mixins","sass","scss"],"latest_commit_sha":null,"homepage":"https://npmjs.com/sassy-mixins","language":"SCSS","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/danieldafoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-23T21:37:15.000Z","updated_at":"2023-06-27T00:54:17.000Z","dependencies_parsed_at":"2023-07-24T08:20:20.346Z","dependency_job_id":null,"html_url":"https://github.com/danieldafoe/sassy-mixins","commit_stats":null,"previous_names":["danieldafoe/sassy-mixins"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danieldafoe/sassy-mixins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsassy-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsassy-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsassy-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsassy-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danieldafoe","download_url":"https://codeload.github.com/danieldafoe/sassy-mixins/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danieldafoe%2Fsassy-mixins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276169305,"owners_count":25596952,"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-09-20T02:00:10.207Z","response_time":63,"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":["css","helpers","mixins","sass","scss"],"created_at":"2025-01-13T03:50:44.250Z","updated_at":"2025-09-20T22:31:05.072Z","avatar_url":"https://github.com/danieldafoe.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Sassy Mixins banner, pink background, woman tipping hand emoji swearing](./sassy-mixins.jpg)\n\n# Sassy Mixins\n\n## Never write a `_mixins.scss` file again.\n\nYou've finally realized you should respect the preferences of users on the web. (You were probably told to, though.) Either way, it's about time.\n\nThis criminally lightweight package grants you the power to use the latest media query features from the [Media Queries Level 5 CSS specification](https://www.w3.org/TR/mediaqueries-5/) to ensure you build web experiences that respect settings and preferences a user has selected in their browser or their operating system.\n\n## Available mixins (9)\n\n### Color (4)\n- Forced colors\n- Inverted colors\n- Contrast: more\n- Contrast: less\n\n### Data (1)\n- Reduced data\n\n### Motion (1)\n- Reduced motion\n\n### Theme (2)\n- Dark mode\n- Light mode (non-dark mode)\n\n### Transparency (1)\n- Reduced transparency\n\n## How to use this package\n\nAssuming you're using [Sass](https://sass-lang.com) already, you have two easy steps:\n\n1. Install the package as a development dependency.\n\n```sh\nnpm install -D sassy-mixins\n```\n\n2. Reference `sassy-mixins/mixins.scss` in your Sass file and use the mixins. (I recommend namespacing your import so you know which place your mixins come from, but it's not required.)\n\n```scss\n@use '{path/to/your/node_modules}/sassy-mixins/mixins' as sassy;\n\n.dubstep-lighting {\n  animation: pulsate 500ms infinite;\n\n  @include sassy.prefers-reduced-motion {\n    animation: none;\n  }\n}\n```\n\n**Note:** The path to the location of the `sassy-mixins/_mixins.scss` file may change depending on your project configuration or code bundlers you are using. You should probably use a relative path.\n\n### @use vs. @import\n\n- If you use Dart Sass **\u003e= v1.23.0**, you can use `@use`.\n- If you use LibSass or Ruby Sass, you **must** use `@import`.\n\n\n## Frequently asked questions\n\n### Will this increase my bundle size?\nNo. [Sass partials are not compiled into CSS](https://sass-lang.com/guide#topic-4).\n\nThe code contained in `_mixins.scss` is not directly compiled into CSS.\n\n### Will this make me a better developer?\nYes. Not only does respecting user preferences make you a better developer, it makes you a better human being.\n\n### Can I use this with LESS?\nSure. You can copy the code inside the `@mixin` and replace the `@content` with whatever code you want to apply for that user preference.\n\n### Can I use this without Sass?\nSure. You can copy the code inside the `@mixin` and replace the `@content` with whatever code you want to apply for that user preference.\n\n\n## Future additions\n\nWhenever the Media Queries specification publishes a new draft, I will update this package.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldafoe%2Fsassy-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanieldafoe%2Fsassy-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldafoe%2Fsassy-mixins/lists"}