CSS/SCSS

I have a lot of experience with CSS and really love SASS. I primarily use SASS for nesting and variables, but every so often I use loops.

Code Sample

SASS For Loop

This is just to demo one of the more complex pieces of SASS.

This removes the left padding on the first item in a row of up to 5 rows.

$max: 20;
$step: 4;
@media (min-width: 768px){
@for $i from 1 through ceil($max/$step) {
    $value: ($i - 1)*$step + 1;
        #producerContainer .col-md-3:nth-of-type(#{$value}){
            padding-left: 0;
        }
    }
}

Which produces this CSS

@media (min-width: 768px) {
  #producerContainer .col-md-3:nth-of-type(1) {
    padding-left: 0;
  }

  #producerContainer .col-md-3:nth-of-type(5) {
    padding-left: 0;
  }

  #producerContainer .col-md-3:nth-of-type(9) {
    padding-left: 0;
  }

  #producerContainer .col-md-3:nth-of-type(13) {
    padding-left: 0;
  }

  #producerContainer .col-md-3:nth-of-type(17) {
    padding-left: 0;
  }
}

Of course, you could always just use: