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