One feature that makes preprocessors like Sass and Less appealing is the ability to use variables with them. Recently, I wrote an article on SASS V...
For further actions, you may consider blocking this person and/or reporting abuse
Oh cool! I didn't know vanilla CSS variables were a thing. Thank you! :)
:)
Great post! π
So do you come from future?
Android 62, hu! ππ
πππ. Thanks for pointing that out.
Thanks to you, Sarah!
the best thing is
css variables
can be updated at runtime by javaScript πIkrππ
Now that's a great reading!
The variables syntax is extremely weird though... But I got the feeling it's actually a nod to BEM, as CSS variables (unlike pre-procesor variables) really excel at making modifiers. That's actually my favourite feature of CSS vars.
Check this pen out :) codepen.io/facundocorradini/pen/Rx...
There I demonstrate how redefining a variable on a simple class selector (modifier) can influence a dozen properties distributed throughout several selectors. It's literally a single line for what would otherwise take 10, so it's a full order of magnitude drier! :D Any input will be appreciated ;)
Now going back to the OP, there are some things I think needs clarifying:
"There's no scope" might be an overstatement. There is no code block scope as SASS would, but DOM inheritance scope instead. Which actually, is great. Generally CSS vars are declared at the :root element (/ the html tag) to make them global, but nothing stops you from declaring them anywhere in the DOM tree.
For media queries... remember you can't set up the break points a variables. It might sound silly for some, but I know many has those as SASS variables for whatever reason. CSS vars won't let you do that (I tried, I failed :p), so one more reason to keep our good ol' pre-processors as well.
great post Sarah
Thank you :)
Good to know but what about production ? say you have 50% customers out of 100 who uses IE ?