You'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.
This criminally lightweight package grants you the power to use the latest media query features from the Media Queries Level 5 CSS specification to ensure you build web experiences that respect settings and preferences a user has selected in their browser or their operating system.
- Forced colors
- Inverted colors
- Contrast: more
- Contrast: less
- Reduced data
- Reduced motion
- Dark mode
- Light mode (non-dark mode)
- Reduced transparency
Assuming you're using Sass already, you have two easy steps:
- Install the package as a development dependency.
npm install -D sassy-mixins
- 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.)
@use '{path/to/your/node_modules}/sassy-mixins/mixins' as sassy;
.dubstep-lighting {
animation: pulsate 500ms infinite;
@include sassy.prefers-reduced-motion {
animation: none;
}
}
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.
- If you use Dart Sass >= v1.23.0, you can use
@use
. - If you use LibSass or Ruby Sass, you must use
@import
.
No. Sass partials are not compiled into CSS.
The code contained in _mixins.scss
is not directly compiled into CSS.
Yes. Not only does respecting user preferences make you a better developer, it makes you a better human being.
Sure. You can copy the code inside the @mixin
and replace the @content
with whatever code you want to apply for that user preference.
Sure. You can copy the code inside the @mixin
and replace the @content
with whatever code you want to apply for that user preference.
Whenever the Media Queries specification publishes a new draft, I will update this package.