using-sass | How do I set up Sails to use SASS stylesheets | Theme library

If you add sass_builder: ^2.1.2 to the dev_dependencies in your project it will run during the build and create a .css file for any .scss file you have.

I'd recommend removing signin_component.scss.css from your source directory. signin_component.css (notice the extension) will be generated during the build.

Update your angular component to include the generated .css file:

So given #000000 and #444444, you can calculate the contrast ratio (2.15 in this case). The math is pretty straightforward, albeit a little hairy. (See the "relative luminance" definition.)

Now you want to go backwards? If you have #000000 and want a ratio of 4.5, starting with #444444, what should the color be? Is that what

I need to reverse my contrast formula

means?

It's a little complicated because you're solving for 3 variables, the red, green, and blue components, plus the luminance formula doesn't treat the red, green and blue equally. It's using 21.25% red, 71.5% green, and 7.25% blue.

Plus, the luminance formula isn't a simple linear formula so you can't just take a percentage short of luminance and bump the color value by that same percentage.

For example, in your case, the ratio was 2.15 but you need it to be 4.5. 2.15 is 108% short of 4.5, the desired value.

However, if you look at your original RGB values #444444 and you calculated it needed to be #757575 (in order to have a 4.5 ratio), then if you treat those RGB values as simple numbers (and convert to decimal), then #444444 (4473924) is 72% short of #757575 (7697781).

So you have a disconnect that your ratio is short by 108% but your RGB values are short by 72%. Thus you can't do a simple linear equation.

(The numbers aren't quite exact since #757575 gives you a 4.56 ratio, not an exact 4.5 ratio. If you use #747474, you get a 4.49 ratio, which is just a smidge too small for WCAG compliance but is closer to 4.5 than 4.56. However, #444444 is 71% short of #747474, so it's still not the same as 2.15 being 108% short of 4.5, so the basic concept still applies.)

Just for fun, I looked at the values of 0x11111 through 0x666666, incrementing by 0x111111, and calculated the contrast ratio. There weren't enough points on the graph so I added a color halfway between 0x111111 and 0x222222, then halfway between 0x222222 and 0x333333, etc.

You use vue-cli@3.x, this probably means that your project uses vue-loader@15.x Since version 15, the vue-loader does not need additional configs for loaders. You can configure only your main webpack loaders.

Your rules for 'sass or scss' files should look like:

I believe this was due to a 'name collision' as described in https://github.com/mkhairi/materialize-sass/issues/81. The SCSS actually also contains some 'legacy' code which imports individual components of an older version of Materialize:

I assume you are aware of the reason why it didn't show the fallback. But since it's an answer I will explain the reasons

The current mixin block has only one background property which makes the sass compiler to generate only one property. I don't think sass can identify whether 'var' is supported in browser or not. So, we have to explicitly specify if we need the fallback.

Since you already have the map all you need is to get the value by giving the key 'primary'

Instead of importing it in the javascript part, switch it to import from css part... I know that you:

I don't want to use html tags.

But I assume that you mean that you want the compiled css instead of plain css. You can try this way:

Looks like I need to also import Bootstrap functions before variables:

Try this npm package - sass-json-export

It returns a JSON inside the output CSS file. You have the option to have the JSON returned inside a media query or a comment. This CSS file can be easily parsed to extract the JSON part into a separate JSON file.