Loops in CSS Preprocessors
Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code.
Thank you for taking the time to report an issue.
What's wrong... Please write below.
See how the use of CSS Preprocessors, like LESS, can give you more power and can help ease creation of style sheets (which tend to get complex very quickly). [02:02] - What is a preprocessor? The big 3 (LESS, SASS, Stylus) - Which one should I use? 37-Minute video tutorial.
A few weeks ago CSS variables—more accurately known as CSS Custom Properties—shipped in Chrome Canary behind the Experimental Web Platform Features flag. Native CSS variables weren’t just an attempt to copy what CSS preprocessors could already do. In fact, if you read some of the initial design discussions, you’ll see that most of the motivation for native CSS variables was to make it possible to do things you can’t do with preprocessors!
Today I want to look at css preprocessors in general. What they are, how they work, why you might or might not want to use one and which one might you choose. I’ll show you some of the basics of Sass and LESS too. In a followup post next week or maybe the week after I’ll dig a little deeper into some real code, but here I want to keep things more general as way of an introduction.
A lot of people think preprocessors fully cover the realm of logic and computation, but the calc() function can do something that no preprocessor can: mix any kind of units. Preprocessors can only mix units with a fixed relation between them, like angular units, time units, frequency units, resolution units and certain length units.
Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables ("CSS Custom Properties") for the same reasons. But there are also some important differences that should be made clear.
Variables invariably exist in all programming languages, and that's because they are pretty useful. You just have to store a value in a variable once, and then you can use it later multiple times, avoiding repetition. While CSS is not a programming language, lack of variables still limits its capabilities. Now that the native CSS variables are around, I would like to discuss how they are different from variables that CSS preprocessors provide and how to use them properly.
When they hit the front-end landscape a few years ago, preprocessors were heralded as the saviour of CSS, bringing modularity, meaning and even a degree of sexiness. Terms like “Sass architecture” became commonplace, ushering in a new generation of CSS developers who occasionally went to excess with their new-found power. The results were marvellous, and sometimes undesirable.
In the past, a lot of web developers were reluctant to look into CSS preprocessors, for fear of their complexity, added burden in the development process, or the possibility that they’re trying to offer a solution to an issue that they don’t believe exists. People are beginning to realize the benefits of using a CSS preprocessor, but the decision to finally try one out is made even more difficult when faced with a few different options.