For loop in SCSS with a combination of variables [duplicate]

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
– pawel-kuznik

2012-05-13 12:01:52 +00:00
Commented May 13, 2012 at 12:01 — pawel-kuznik
– pawel-kuznik, Commented May 13, 2012 at 12:01

Xabriel · Accepted Answer · 2015-05-21 13:14:12Z

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, 2015 at 13:14

answered May 27, 2012 at 22:46

Xabriel

7094 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

steveax Over a year ago

Probably be better to fetch the list length rather than hardcoding it: @for $i from 1 through length($colors) {...

Xabriel Over a year ago

For sure is better to not hardcode the length. I applied the change. Thanks steveax.

Sarcadass Over a year ago

This response should be validated.

Alex Guerrero · Accepted Answer · 2015-06-08 02:22:47Z

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

hopper · Accepted Answer · 2012-05-13 16:57:58Z

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, 2012 at 16:57

hopper

13.5k7 gold badges52 silver badges54 bronze badges

Collectives™ on Stack Overflow

For loop in SCSS with a combination of variables [duplicate]

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related