Skip to content
loading...
Cover image for 🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables

🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables

adam_cyclones profile image Adam Crockett github logo ・1 min read  

JavaScript Enhances Scss mixins (5 Part Series)

1) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - CSS element() function polyfill 2) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - Using canvas for unique UI special effects 3) 🎩 JavaScript Enhanced SCSS mixins! 🎩 - Making CSS scopes with CSS variables. 4) 🎩 JavaScript Enhanced Scss mixins! 🎩 - Intelligent Accessibility with css variables 5) 🎩 JavaScript Enhanced Scss mixins! 🎩 concepts explained

Have you ever wanted to pick a background colour and not have to worry if it meets the WCAG 2.0 AAA standard, you want to just do it in scss and never worry about it.

Well now you can.

Usage

  1. drop the 14 lines of mixins into your codebase
  2. drop the 68 lines of JavaScript into your codebase
  3. Include the tiny-color js library
  4. do this:
.test {
    @include colorAuto();
    background-color: #83a787;
    color: #000; // optional
    font-size: 14px; // optional 
}

How it works

Conceptually it uses the same technique as:

Bonus tips.

  • The chrome color picker has a standards checker built in!
  • This is the worlds nicest accessible color library http://clrs.cc/a11y/
twitter logo DISCUSS
Discussion
markdown guide
Classic DEV Post from Jul 27 '19

If You Don't Know, Now You Know - GitHub Is Restricting Access For Users From Iran And A Few Other Embargoed Countries

Please help our cause against modern-day discrimination

Adam Crockett profile image
I work at ForgeRock as a Front End Engineer, I play with all sorts really. Lately WASM is my toy of interest.