Hacker News new | ask | show | jobs
by arxpoetica 4349 days ago
Can anyone think of a use case for this beyond what a precompiler (Sass, Less, Stylus) can do?
4 comments

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.

I couldn't think of a very good example, but here's something: http://codepen.io/anon/pen/vuyAI

The CSS use a couple of custom properties that define the foreground and background colors. Then, some elements redefine those custom properties (through CSS or JS) and that in turn makes all their children inherit the new custom properties' values and change their styles. This makes the rules that use the custom properties very general, and avoids the need to write more specific rules for the alternative colors. I hope this makes sense :)

I don't think this is possible to do with CSS preprocessors.

I think the idea is you use this rather than a precompiler.
Changing bootstrap theme colors on the fly would be one reason to use this, even though you might be compiling bootstrap on each build.
Because precompilers are sort of a disruption of the point of CSS to begin with. I know, I know, a lot of people use them, but using style sheets that require compilation pretty much defeats the purpose of separation.
Yes and no. The browser has to parse the CSS, and it's most likely building an abstract symbol tree. So in a sense CSS is compiled too, it just happens in the browser so web developers don't have to be aware of it.

Do you remember the type attribute?

    <style type="text/css">...</style>
That was originally put there so we could have different types of stylesheet languages, instead of everyone having to use CSS all of the time. Maybe browsers should incorporate the most popular LESS and SASS projects so that they can support type="text/less" and type="text/sass" too. Some workaround will be needed for old browsers (a javascript shim that retrieves server-compiled css) during the transition period, but eventually we'd end up with being able to use LESS, SASS, and CSS where needed, interchangably.