SCSS Loops

[Jerba]

I’ve been teaching myself SCSS loops since I’ve never really touched any ‘advanced?’ SCSS functionality.

Anyway, I’ve been experimenting using for loops and I managed to achieve what I wanted which was for the boxes to get darker (see codepen), however, I’m doing so by essentially using loops to create 100 classes and assign a different colour to each. Is there a better way of doing this? For example is there a way to essentially tell SCSS ‘every time you see .box give it a background colour and make it X% darker than the previous .box’

$class: col_;

      // loops through 100 times
      @for $i from 1 through 100 {

        // for each $col_#{i} 
        .#{$class}#{$i} {

          // set the background-color to cornflowerblue and 
          // each time lighten the color slightly
          background-color: darken(cornflowerblue, 0% + ($i / 2));
        }
      }

Here’s what I have already:

http://codepen.io/Responsive/pen/qdjooX?editors=110

Thanks!

[Jerba]

I just had a strange mix of deja vu and creepiness, a song from the Fight Club soundtrack came on as I was reading “cornflowerblue”…

YOU’RE TALKING ABOUT FIGHT CLUB!

However, I share your nostalgia!

Edit – I need to clarify what I said. I don’t know a better way to do exactly what you’re doing

The Codepen example was simply an experiment I used to help myself understand the usage of the SCSS loops. However, in an attempt to put the functionality in more of a practical example here’s a video by Google regarding the material color palette.

https://youtu.be/xYkz0Ueg0L4?t=23

23 seconds in to the video there is an animation where essentially a base color is clicked on and it provides a grid of lighter and darker shades of that color, which is where I got the idea for the pen.

but if what you want is a grid of squares getting darker like that, I’d do it much different.

Taking into account the example above, how would you approach this? (using SCSS loops if possible, as like I said I’m trying to get into the habit of using them where applicable).

[Jerba]

In the material design video you posted, they’re talking about a color pallet, not 100 different colors. I think solutions for color pallets are much more simple, enough so you could just use lighten and darken off the base few colors to get semantic variable names for use in Sass.

I’ve just had a play around in Codepen, you mean something similar to this?

http://codepen.io/Responsive/full/mJwLvJ/

I’ll always err on the side of simplicity rather than create 100 unique classes and elements.

Yeah, I feel my previous pen may have been a little excessive considering the effect I was going for…

[JustinF]

Why even add another class? Wouldn’t this be slightly simpler?

@for $i from 1 through 10 {
  .box:nth-of-type(#{$i}) {
    background-color: darken(cornflowerblue, 0% + $i);
  }
}

[JustinF]

Here’s something similar with the mix() function.

http://codepen.io/jmaker/pen/NqgzzM?editors=110

[Jerba]

Thank you all for the feedback here’s what I have now. This is better… right?

http://codepen.io/Responsive/pen/NqgEWO?editors=010

But, surely this is just doing the same thing as before, but without creating a new class?

[TheDoc]

Total side note: as a Canadian, I appreciate the colour class names. Unfortunately, you’re going to run into confusing situations where you’re defining color: $something; and you might instinctively start writing colour: $something. I highly recommend ditching the u, as much as that pains me!

[Paulie_D]

ditto…

I confess, as a Brit I use colour automatically except when coding or typing here and on SO etc.

I just seem to auto-switch to the color usage there.

[Author]

Posts