For loop in SCSS with a combination of variables

Question

I've got a bunch of elements: (#cp1, #cp2, #cp3, #cp4)

that I want to add a background colour to using SCSS.

My code is:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@for $i from 1 through 4 {
    #cp#{i} {
        background-color: rgba($(colour#{i}), 0.6);

        &:hover {
            background-color: rgba($(colour#{i}), 1);
            cursor: pointer;
        }
    }
}

and what is wrong in this code? – pawel-kuznik May 13 '12 at 12:01 — pawel-kuznik, May 13 '12 at 12:01

Xabriel · Answer 1 · 2015-05-21T13:14:12.563

60

Instead of generating the variables names using interpolation you can create a list and use the nth method to get the values. For the interpolation to work the syntax should be #{$i}, as mentioned by hopper.

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

$colors: $colour1, $colour2, $colour3, $colour4;

@for $i from 1 through length($colors) {
    #cp#{$i} {
        background-color: rgba(nth($colors, $i), 0.6);

        &:hover {
            background-color: rgba(nth($colors, $i), 1);
            cursor: pointer;
        }
    }
}

edited May 21 '15 at 13:14

answered May 27 '12 at 22:46

Xabriel

709
4
4

15

Probably be better to fetch the list length rather than hardcoding it: `@for $i from 1 through length($colors) {...` – steveax May 28 '12 at 20:44
For sure is better to not hardcode the length. I applied the change. Thanks steveax. – Xabriel May 21 '15 at 13:16
This response should be validated. – Sarcadass Sep 18 '15 at 09:43

Alex Guerrero · Answer 2 · 2015-06-08T02:22:47.267

As @hopper has said the main problem is that you haven't prefixed interpolated variables with a dollar sign so his answer should be marked as the correct, but I want to add a tip.

Use @each rule instead of @for loop for this specific case. The reasons:

You don't need to know the length of the list
You don't need to use length() function to calculate the length of the list
You don't need to use nth() function
@each rule is more semantic than @for directive

The code:

$colours: rgb(255,255,255), // white
          rgb(255,0,0),     // red
          rgb(135,206,250), // sky blue
          rgb(255,255,0);   // yellow

@each $colour in $colours {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Or if you prefer you can include each $colour in the @each directive instead of declare $colors variable:

$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0);     // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0);   // yellow

@each $colour in $colour1, $colour2, $colour3, $colour4 {
    #cp#{$colour} {
        background-color: rgba($colour, 0.6);

        &:hover {
            background-color: rgba($colour, 1);
            cursor: pointer;
        }
    }
}

Sass Reference for @each directive

score 19 · Answer 3 · answered May 13 '12 at 16:57

19

SASS variables still need to be prefixed with a dollar sign inside interpolations, so every place you have #{i}, it should really be #{$i}. You can see other examples in the SASS reference on interpolations.

answered May 13 '12 at 16:57

hopper

13,060
7
49
53

For loop in SCSS with a combination of variables

3 Answers3