Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SCSS Loops

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #203614
    Jerba
    Participant

    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!

    #203624
    Jerba
    Participant

    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).

    #203627
    Jerba
    Participant

    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…

    #203628
    JustinF
    Participant

    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);
      }
    }
    
    #203632
    JustinF
    Participant

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

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

    #203641
    Jerba
    Participant

    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?

    #203673
    TheDoc
    Member

    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!

    #203675
    Paulie_D
    Member

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.