Live data from Hacker News

CSS Variables in Firefox 31 – new syntax

jan.rs

51–54 of 54 posts

Re: CSS Variables in Firefox 31 – new syntax

#51

I like it. The syntax actually feels more css-like to me than what most preprocessors use. But never mind the syntax, the killer feature us the cascading - that's what sells me on this vs SASS/LESS/etc. (And, having it native is also nice - this way I can just dump something on Github Pages and skip the compilation step.)

Can you suggest a use-case where the cascading variables is a helpful thing?

Re: CSS Variables in Firefox 31 – new syntax

#52

Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?

For one, it means that you don't need to have a precompiler step in the development process. You can more easily edit the value inline in your browser's developer tools. You can more easily put together simple static sites.

Another is that you can use it in conjunction with calc(), which you can't do in a preprocessor. Take a look at some example use cases for calc, which can't be done in a preprocessor: http://css-tricks.com/a-couple-of-use-cases-for-calc/ Now instead of just using constant values in those, you can use variables. This can be even more powerful for responsive designs, because you can set the variable to different values based on a media query.

Re: CSS Variables in Firefox 31 – new syntax

#53

Writing your styles in javascript is a better option. You get variables, as well as functions and modules (e.g. with browserify), all with sane syntax and semantics (no "cascade"). Preprocessors are an inferior solution, limited by the semantics of CSS and leading, by the pervasive use of macros, to needlessly large CSS file sizes.

https://github.com/chenglou/RCSS
Post reply on HN