Sass: Change Color with @For Loop

Sass: Change color with @for loop

You can darken the color using $i inside @for and apply respective classes to the divs. Hope this helps.

SCSS

@mixin color-divs ($count, $baseName, $startcolor) {
    @for $i from 0 through $count {
        $background-color: darken($startcolor, $i * $i); 
    .colored-div#{$i} {
      background: $background-color;
      height:100px;
      width:200px;
      float: left;
      margin-right: 5px;
    }
   }

}
 @include color-divs(5,'a',#ffd8b1);

HTML

<div class="colored-div1">a</div>
<div class="colored-div2">b</div>
<div class="colored-div3">c</div>
<div class="colored-div4">d</div>
<div class="colored-div5">e</div>

Demo

See demo

Sass @for loop - from one color to another color

The function you're needing here is mix();

$color-1: white;
$color-2: black;

$steps: 5;

@for $i from 0 to $steps {
    .class-#{$i + 1} {
        background: mix($color-1, $color-2, percentage($i / ($steps - 1)));
    }
}

Output:

.class-1 {
  background: black;
}

.class-2 {
  background: #3f3f3f;
}

.class-3 {
  background: #7f7f7f;
}

.class-4 {
  background: #bfbfbf;
}

.class-5 {
  background: white;
}

http://sassmeister.com/gist/d0fc452765908aac2617

Want them in the reverse order? Just swap the colors.

Colors loops in SCSS

You can try the following solution:

$my-colors: ("green", #008000, "blue", #0000ff, "orange", #fca644);

@for $colIndex from 1 through length($my-colors) {
  table td:nth-child(#{length($my-colors)}n + #{$colIndex}) {
    color: unquote(nth($my-colors, $colIndex));
  }
}

By using this solution you only need to change the array of the colors ($my-colors) to change the order and amount of different colored columns.

The result of the above code (CSS output / demo on JSFiddle):

table td:nth-child(6n + 1) {  color: green;}table td:nth-child(6n + 2) {  color: #008000;}table td:nth-child(6n + 3) {  color: blue;}table td:nth-child(6n + 4) {  color: #0000ff;}table td:nth-child(6n + 5) {  color: orange;}table td:nth-child(6n + 6) {  color: #fca644;}

<table>  <tr>    <td>Column 1</td>    <td>Column 2</td>    <td>Column 3</td>    <td>Column 4</td>    <td>Column 5</td>    <td>Column 6</td>    <td>Column 7</td>    <td>Column 8</td>    <td>Column 9</td>    <td>Column 10</td>    <td>Column 11</td>    <td>Column 12</td>    <td>Column 13</td>  </tr></table>

Call different variables color in a loop in Sass

You could solve this by adding all the colors in another variable called $colors and loop through it. It's much easier to maintain if one of the colors change.

$button-height: 20px;

$color-0: #ff5722;
$color-1: #ff4514;
$color-2: #647c8a;
$color-3: #3f51b5;
$color-4: #2196f3;
$color-5: #00b862;
$color-6: #afdf0a;
$color-7: #a7b61a;
$color-8: #f3e562;
$color-9: #ff9800;

$colors: $color-0, $color-1, $color-2, $color-3, $color-4, $color-5, $color-6,
  $color-7, $color-8, $color-9;

.all-buttonCareCenter {
  @for $i from 1 through length($colors) {
    &:nth-child(#{length($colors)}n+#{$i}) {
      .btn.btn-primary {
        background-color: nth($colors, $i); 
      }
    }
  }
  .buttonCareCenter {
    height: $button-height;
    border: 0;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  }
}

See this CodePen example I created, click right top » View Compiled CSS to view the compiled code with all the iterations.

Using SASS for loop to define variable color

You can do something like this

Source for the function nth

SCSS

$colors : #ecf5f9 #cfe5ef #b1d5e6;
@for $i from 1 through 3 {
  h1.blue-#{$i}
    {
      background-color : nth($colors, $i)  
     }
}

HTML

<h1 class="blue-1">blue one</h1>
<h1 class="blue-2">blue two</h1>
<h1 class="blue-3">blue three</h1>

DEMO

See demo

SCSS Color Loop

just like this

// scss
$color1: #F4858E;
$color2: #BFE2CA;
$color3: #A6DAEF;
$color4: #FED88F;
$color5: #D1B6F7;

$colors: $color1, $color2, $color3, $color4, $color5;

@for $i from 1 through length($colors) {
    .color#{$i} {
        color: nth($colors, $i);
        &.darkest {
          color: darken(nth($colors, $i), 20%);
        }
        &.darker {
          color: darken(nth($colors, $i), 10%);
        }
        &.lighter {
          color: lighten(nth($colors, $i), 10%);
        }
        &.lightest {
          color: lighten(nth($colors, $i), 20%);
        }
    }
}

gives me that output

//css
.color1 {
  color: #F4858E;
}
.color1.darkest {
  color: #ec2737;
}
.color1.darker {
  color: #f05663;
}
.color1.lighter {
  color: #f8b4b9;
}
.color1.lightest {
  color: #fce3e5;
}

.color2 {
  color: #BFE2CA;
}
.color2.darkest {
  color: #79c290;
}
.color2.darker {
  color: #9cd2ad;
}
.color2.lighter {
  color: #e2f2e7;
}
.color2.lightest {
  color: white;
}

.color3 {
  color: #A6DAEF;
}
.color3.darkest {
  color: #50b6df;
}
.color3.darker {
  color: #7bc8e7;
}
.color3.lighter {
  color: #d1ecf7;
}
.color3.lightest {
  color: #fcfeff;
}

.color4 {
  color: #FED88F;
}
.color4.darkest {
  color: #fdb52a;
}
.color4.darker {
  color: #fec65c;
}
.color4.lighter {
  color: #feeac2;
}
.color4.lightest {
  color: #fffbf4;
}

.color5 {
  color: #D1B6F7;
}
.color5.darkest {
  color: #975aed;
}
.color5.darker {
  color: #b488f2;
}
.color5.lighter {
  color: #eee4fc;
}
.color5.lightest {
  color: white;
}

is that what you want ?

cycling through a list of colors with sass

If its possible with pure CSS, its possible with Sass. This will work with any number of colors:

http://codepen.io/cimmanon/pen/yoCDG

$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through length($colors) {
    li:nth-child(#{length($colors)}n+#{$i}) {
        background: nth($colors, $i)
    }
}

Output:

li:nth-child(6n+1) {
  background: red;
}

li:nth-child(6n+2) {
  background: orange;
}

li:nth-child(6n+3) {
  background: yellow;
}

li:nth-child(6n+4) {
  background: green;
}

li:nth-child(6n+5) {
  background: blue;
}

li:nth-child(6n+6) {
  background: purple;
}

Using a sass variable in an @each loop

And I realized I overcomplicated it. You don't need any extra functions because the @each is designed to work with maps and iterating over multiple values.

$cool: blue;
$mad: red;

$colors: (
  cool: $cool,
  mad: $mad
);

.prfx-color {
  @each $key, $val in $colors {
    &--#{$key} {
      background-color: $val;

      &::after { content: "$#{$key}"; }
    }
  }
}

---

Related Topics