Write similar classes with the SCSS @for Control Directive
Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.
[00:01] To iterate with the for directive we'll start with the for and name the iteration value. Then setup the start and endpoints for the loop from the start through the end. Now we need something to loop over. If we use the variable as a value its value will change for every iteration.
[00:20] We loop 9 times because the to syntax doesn't include the last loop, but we can use through to include the last loop. Now we're looping 10 times, but we're overwriting the order class 9 times. Let's make some columns. We can interpolate the variable so each class name will be unique.
[00:41] When we set the value for width we can divide a 100 percent by the variable, which gives us some easy to use grid columns. If we only need one column we use the column one class one time. If we need four columns we use the column four class four times.
[01:00] Maybe we need some quick margin top classes, and we're done. Maybe our margin top classes need to increment by half a round. We can just make a variable for half the loop value and change our iteration variable to the new value variable.
[01:20] Great, that worked, but classes can't contain a decimal. We can use a naming convention like margin top half of the iteration. In the class name we just need to reset the variable in that half. That worked. Maybe you want something a little more specific. We could use a naming convention like margin top value and a half.
[01:41] First we need to see that the value has a decimal. The floor function returns the value rounded down. Every other iteration is a whole number. If the rounded down value is not equal to the value then we know it has a decimal. Let's see if the decimal variable's working.
[02:02] Every class with a decimal is true. Now we can use a conditional to help name our class. The if function takes three arguments, the condition, the return value if the condition is true -- that's a little long for a class name, let's just call it 05 -- and the final argument is the return value if the condition is false.
[02:27] Now, we just need to update the class with our class name variable, get rid of the half and see how that goes. Now we have our margin top value and a half naming convention. If a naming convention isn't the right solution for our decimal problem we can use an attribute selector instead.
[02:47] Let's target a class attribute whose value can be a list of words as long as it contains empty dash and our interpolated value. Classes and attributes have the same specificity value, so either one is fine. Maybe we need some color classes that are lighter variations of a single color.
[03:07] Let's start with our color, and now we need to lighten the color for each loop. The lighten function accepts a color, and a percentage to lighten the color, let's say three percent times our loop number. We create the class name by interpolating the color and loop number and the color will be our color value variable. There you go, easy-breezy color classes.
[03:35] Notice how we're not preserving the original color for the first iteration. The if function can help us out with that. If we're on the first loop the color value is the original color. If not, lighten the color. There is our original color.
[03:51] If we want to use a hex color we need a name, because CSS classes can't start with a hash. You could use an attribute selector but a hex value for a class name wouldn't really make sense. Let's use a name, how about passion? Nice. This only works for one color.
[04:10] If we use a mix-in we can make classes for multiple colors, but mix-in will be the color, the color name, and the loop number. Let's put the loop code in the mix-in. We don't need the color variable anymore and let's use the color name argument. All we need now is to include our mix-in in the loop. Let's include some passion, maybe a little empathy, and something for the cool kids.
[04:47] Now, we've created color classes based off of multiple colors. Now we've combined iteration with variables, interpolation, conditionals and mix-ins. Iterations in SAS by itself is pretty sweet, but it's way more powerful when it's combined with other SAS features.