Comment by bbx | Hacker News Reader

Comment by bbx | Hacker News Reader

CSS variables are the only reason I started using Sass and LESS in the first place. But although these preprocessors come with other interesting features, I never managed to truly incorporate them in my workflow.

The way I ended up solving the CSS variables issue (i.e. replacing the same property/value combination in multiple locations) was to actually regroup selectors.

For example, I'd have:

  #title,
  .nav a,
  .post-title em {
    color: #db4e44;
  }

The only annoying thing is that it can result in a long list of selectors (although I'd put them on one line anyway). But one thing I truly appreciate with this approach is that you can edit any value with your browser's inspector, and see it instantly update all instances at once. It's great to test out new colors for example.

The other option would be to have a specific class that would apply this style. But then, you'd move the styling from the CSS to the HTML, and I've always tried to prevent myself from breaking this golden rule.

But this still isn't a complete solution -- if you want the same color as a "color" in one place, "background-color" in another, and "border-top-color" in another, you're still repeating yourself. Likewise if you want to do math with paddings/margins etc.

I don't know why, if you're using LESS or equivalent, you wouldn't use variables. It makes for vastly more maintainable CSS than the approach you take.

Arguably a more maintainable technique would be to use multiple classes and define, e.g. a "brand" class just for this color, so you can have a simpler standalone rule:

    .brand {
      color: #bada55;
    }

See OOCSS for more details.

While that's good practice, it's a challenge to get it right on a large legacy systems, so I still find variables useful in practice. Also, it's nice to be able to perform functions involving variables, e.g.

    .brand {
      color: lighten($link-color, 20%);
      background: ($link-bg + $page-bg)/2;
    }

The long list of selectors can ba a problem too, IE 6-9 only supports up to 4095 selectors per style sheet (http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164...). However there are workarounds like @importing multiple style sheets.

Sometimes you want the color to match the border color. The properties are not always the same, which is what causes repeat.

Variables are also useful when you can do calculations on them.

SASS can give you the same result:

    %red 
      color: #f00
    %blue
      color: #00f
    header
      @extend %red
    div
      @extend %blue
    #foo
      @extend %red
    p
      @extend %red

gets processed into

    header, #foo, p {
        color: #F00;
    }
    div {
        color: #00F;
    }

codepen sample: http://cdpn.io/JoHAv

I have found with JS heavy frontends, simple solutions like this stop being effective quickly. I have about as many sass file as I do JS files in my project. Being able to use variables defined elsewhere in all those files is essential.

I've found that nested rules are useful on almost every stylesheet. That, and variables, are the two main LESS features I use.

Reply on news.ycombinator.com