SCSS: Change dynamically color of a list from an array of colors

SCSS file:

$colors: (#0869ad, #ef0e39, #9e79d7);

$class-slug: rectangle !default;
@for $i from 1 through length($colors) {
  $color: nth($colors, $i);
  .#{$class-slug}-#{$i} { 
    background-color: $color;

HAML file:


See the Pen QqgjzQ by Victor Velazquez (@vicmaster) on CodePen.

That's all folks!

Victor Velazquez

Coder, Musician, Startups, Passionate Dancer & Life Lover. Director of Engineering at MagmaLabs, Co-founder of Web Dev Talks, Co-founder of Voltaire, Co-founder of Paqkit, Ex-co-founder of Zaznova.

Subscribe to The zazvick's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!