Communication between Javascript and SASS

Question

I am working on a concept for the communication between SASS and Javascript. The special thing is that my SASS variables change whole layouts. Of course the Javascript should notice this.

Javascript can not read SASS variables, so far clearly.

However, I can generate CSS variables by switching SASS variables on and off.

CSS variables can now be read with Javascript. Conversely, I know if the SASS variable is on or off.

IE11 can not read CSS variables reasonably, as far as clear. Pollyfill e.g. IE11 - does a polyfill / script exist for CSS variables? solve this problem. If it wasn't for the big overhead. I dont want to use them at all.

My idea is to add non-existing CSS properties to the HTML tag. Like html { stackoverflow: true }. Now I can read this with Javascript.

Of course I have a browser recognition, so I can set the CSS instructions only for IE. E.G. html.browser-msie { stackoverflow: true }. So my CSS is not garbage for the other browsers.

What do you say? What unexpected consequences do I have if I write CSS commands that do not exist?

What exactly are you trying to do? When you open your website in a browser, there is no SASS left anymore, only CSS. So I'm not sure how introducing a CSS custom property should help you at all. — str, Feb 28 '19 at 16:49
You can pass sass variables to JS if you are using a bundler (like Webpack). There are no consequences for setting inexistent properties in CSS, they just won't do anything. — jpenna, Feb 28 '19 at 16:53
@str Example: SASS variable "$nav-fixed: true" causes the CSS variable "--nav-fixed: true" to be generated. In Javascript I now ask if the variable --nav-fixed is set to true or if it exists. Accordingly I change Javascript properties of the cookie banner — dotling, Feb 28 '19 at 16:53

score 0 · Answer 1 · answered Mar 01 '19 at 00:21

If you (for whichever reason I don't see clearly here) write a CSS rule that doesn't exist, it will invalidate and be ignored by the browser like jpenna said.

.mySelector {
    flavour: coffee; // Ignored by the browser
    color: black; // Parsed normally
}

Quoting the CSS reference at MDN:

(...) Be aware that any CSS syntax error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. (...)

Since the invalid rule is ignored, it will never be applied to the selector either. So using JavaScript to find an element that doesn't have the ignored, non-existing rule applied might not be possible unless you plan on reading the whole stylesheet.

Communication between Javascript and SASS

1 Answers1