Use HSS To Use Variables In CSS

Nicolas Cannasse has gone ahead and added variables to CSS. There have been efforts earlier to improve CSS, like CleverCSS and Sass. However, by adding variables Nicolas has perhaps lightened the argument of non-semantic CSS names in CSS frameworks. Reusability tends to create non-semantic names, and having variables to reuse values will help us skip the non-semantic CSS names. Instead of using CSS class called halfwidth, now we can have a variable and use it whenever we want to set width to half width. A good way to centralize certain code, avoid non-semantic CSS names and in the process also reduce some HTML markup.

W3C has repeatedly rejected the color module. The reason perhaps hovers around the conversion of a CSS document to script, which I think is a completely valid reason. But if such efforts as that of Nicolas’ gathers support, it can get popular very soon.

Discussion [Participate or Link]

  1. Tony said:

    It should be pointed out that SASS does have variables, mix-in blocks, and supports inline math, including mixing hex colours.

  2. Abhijit Nadgouda said:

    Tony, thanks for the update.

    I did not stress on the alternative as they change the syntax considerably to extend CSS. I thought HSS was good in providing a better balance with minimal additional syntax for most common needs. I think Sass is more suitable for coding-aware designers.

Say your thought!

If you want to use HTML you can use these tags: <a>, <em>, <strong>, <abbr>, <code>, <blockquote>. Closing the tags will be appreciated as this site uses valid XHTML.



Abhijit Nadgouda
iface Consulting
+91 9819820312
My bookmarks


This is the weblog of Abhijit Nadgouda where he writes down his thoughts on software development and related topics. You are invited to subscribe to the feed to stay updated or check out more subscription options. Or you can choose to browse by one of the topics.