Shulou(Shulou.com)06/01 Report--

Let's first look at what loops can do and how they are used in mainstream CSS preprocessors (Sass, Less, Stylus). Each language has its own syntax, but the end result is the same. There are many ways to make a walking cat

(animation by Rachel Nabors)

PostCSS is also popular, but it doesn't have syntax. It's called a post-processor, and I like to call it a meta-preprocessor. PostCSS allows you to write and share your own preprocessor syntax. You can rewrite Sass or Less in PostCSS if you want, but someone else has done it before you.

cycling conditions

Star trek isn't entirely fiction. If you are not careful, infinite loops can cause the compiler to stall or destroy it. While this is not a good way to eliminate evil robots, it will annoy the people who use your code. So there are limits to the use of loops--usually defined by some incremental loop body or set of objects.

In programming terms:

While loops are universal, loops run until conditions are met. Please be careful! It is easy to have infinite loops here.

For loops are incremental, running a specific number of loop bodies.

For-Each loops through a collection or list, one item at a time.

The use of these cycles decreases in sequence. For-each loops are a form of for loops, and they are also a form of while loops. But most usage scenarios may require more specific classification. I have trouble finding while loops in practice-most examples are better handled with for or for-each. So Stylus provides only the syntax for the latter. Sass 'syntax provides all three, while Less doesn't have a circular syntax-but that doesn't stop us! Here we go.

for-each loop traversing a set

Preprocessor loops are useful when there is a collection of items (list or array)-such as a set of social media icons and colors, or a list of status modifiers (success, warning, error, etc.). Because the for-each loop itself processes the collection of items, it is the most reliable and understandable loop.

Let's see how it works by cycling through a simple list of colors.

In Sass, we'll use the @each directive (@each $item in $list) to get colors:

In Stylus, use the for syntax to process collections:

Less doesn't provide a syntax for loops, but we can use recursion instead. Recursion is calling its own function or mixin. In Less, we implement recursion using mixins:

.recursion() { /* an infinite recursive loop! */ .recursion();}

Now we'll add the when keyword to the mixins to make sure the loop stops.

.recursion() when (@conditions) { /* a conditional recursive "while" loop! */ .recursion();}

We can create a for loop by adding a counter (@i) that starts at 1, and then incrementing (@i + 1) until the condition ends (@i 0), decrementing each iteration by one, so it looks like a decrementing for loop.

It is worth noting that CSS can also implement nth-child-numbering without the need for a preprocessor. CSS, however, does not have a loop structure; it provides a counter() method that can be used to generate content in increments based on the number of DOMs. However, use outside of the content attribute is invalid, so the background color does not change.

grid system

I usually use incremental loops in abstract Sass toolkits and rarely in concrete stylesheets. One exception is to generate numbered selectors, either nth-child (as we did above) or auto-generated class names (typically used in raster systems). We will create a simple responsive grid system with no spacing.

Each grid is a percentage, calculated using span / context * 100%-the basic calculation method used by all grid systems. Here is the syntax for Stylus and Less:

Special profile

On OddBird, we designed a program to generate default user profiles-but wanted the default profiles to be as distinctive as possible. In the end, we only designed 9 unique icons and generated 1296 different avatars using a loop, so most users won't see duplicate avatars.

Each avatar has 5 attributes:

Initial icon shape (9 options)

Optional 0, 90, 180, or 270 degrees (4 options)

Dark Fill (6 options)

Light background color (6 options)

True/false attribute that can invert colors (2 options)

There are 6 colors in the code and 3 cycles:

@for $i from 0 through defines four rotation angles

@for $i from 1 through length($colors) loops through the set of colors ($colors), assigning ($i) to each color. Normally I'd loop through the color collection using @each, but if each item requires a value, it's easier to use @for.

The nested @each $reverse in (true, false) lets us choose whether to reverse the foreground and background colors for each color combination.

Here is the final result written using Sass:

You can convert it to code for Less and Stylus after class. I'm tired of watching it.

Special while loop

True while loops are rare, but I use them occasionally. It's very useful when I see where a path leads. I don't want to go through the whole set or a certain number of iterations--I want to stop the loop when I find the element I need. I usually use it in abstract toolkits and don't need it for everyday stylesheets.

I used Sass to create a toolkit to help me store and control colors. Using variables to store colors is probably the most common use scenario for any preprocessor. Most people do this:

$pink: #E2127A;$brand-primary: $pink;$site-background: $brand-primary;

I know pink may not be the only color on your site, but one is enough for now. I use multiple variable names because it helps to create abstract layers-from basic colors (pink) to broader patterns (brand-primary) and specific usage scenarios (site-background). I also want to convert the monochrome list into a palette that the preprocessor can compile. I need a way to make sure that all the values are correlated and there's a pattern. The approach I use is to store theme colors as key-value pairs in a separate Sass map.

$colors: ( 'pink': #E2127A, 'brand-primary': 'pink', 'site-background': 'brand-primary',);

Why do we have to do this? I do this because I can specify the style generator with a separate variable and automatically create a palette that updates in real time. But it's a double-edged sword, and it's not for anyone. Map doesn't allow me to assign values directly to key-value pairs as I would with variables. To find the value of each color, I need to retrieve the key value using a while loop.

I do this often, but if you search for @while for Sass in my code, you won't find it.

Now we can call the color() function anywhere in the code.

Stylus does not have a while loop syntax, but array variables and recursive functions can be used:

Less doesn't have built-in array variables, but we can create key-value pairs to mimic the same effect as social media colors:

@colors: 'pink' #E2127A, 'brand-primary' 'pink', 'site-background' 'brand-primary';

We'll create @array-get mixin, retrieve the value value from the array using the key value, and then create a recursive while loop to follow the path:

It works as an example, but there are better ways in Less where you can do without using arrays of aliases and named variables (unlike Sass or Stylus):

Since colors work in one variable, I can generate palettes using loops. Here are some examples of using Sass:

I'm sure you can do better than me.

Getting Loopy!

If you don't know when to use a loop, keep an eye out for the loop body. Do you have a lot of selectors that follow the same pattern, or duplicate calculations? Here's how to determine which cycle is best:

If you can list and name the items in the loop, use for-each traversal.

If the number of loops is more important than the loop body itself, or if you need to number each item, use a for loop.

If you need to access the same loop but with different input values, try recursive functions.

For other cases (almost never), use the while loop.

If you use Less…good luck!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.