3 ms·
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 nev
by bbx 13y ago
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.
- samwillis 13y agoThe 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/10164546.aspx http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164...). However there are workarounds like @importing multiple style sheets.
- nawitus 13y agoI've found that nested rules are useful on almost every stylesheet. That, and variables, are the two main LESS features I use.
- mmahemoff 13y agoArguably 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; }
- prezjordan 13y agoSometimes 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.
- crazygringo 13y agoBut 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.
- city41 13y agoI 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.
- cheapsteak 13y agoSASS 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 http://cdpn.io/JoHAv