Topics Search

Loops in CSS Preprocessors

Loops in CSS Preprocessors
Views: 2
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.
Sponsored Links:

Similar posts...


Understanding Less Guards and Loops

Understanding Less Guards and Loops Icon
The developers’ desire to bring features from programming to CSS led to creation of CSS preprocessors. They allow us to define variables and create functions just as we do so in JavaScript; but even more important, we can make our code more flexible by using conditional and iterating blocks.

CSS Preprocessors

CSS Preprocessors Icon
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.

Native CSS Variables

Native CSS Variables Icon
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!

Comparing CSS Preprocessors : SASS and LESS

Comparing CSS Preprocessors : SASS and LESS Icon
Sass and LESS both are CSS Preprocessors. These are two of the most commonly used processors in the industry. CSS processors are very powerful and help you to streamline the development process. Although, both of these share many similarities in syntax, the main difference between them is the way they are processed. LESS is a Javascript library and it is processed at the client side. Whereas Sass runs on Ruby and it is processed at the client side.

Sass And LESS: An Introduction To CSS Preprocessors

Sass And LESS: An Introduction To CSS Preprocessors Icon
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.

Getting Started With CSS calc()

Getting Started With CSS calc() Icon
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.

What is the difference between CSS variables and preprocessor variables?

What is the difference between CSS variables and preprocessor variables? Icon
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.

CSS Custom Properties: Variables

CSS Custom Properties: Variables Icon
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.

Variables: The Backbone Of CSS Architecture

Variables: The Backbone Of CSS Architecture Icon
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.

Less vs. Sass – Which CSS Preprocessor is Best For You?

Less vs. Sass – Which CSS Preprocessor is Best For You? Icon
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.