KPC
Kevin Powell - Community•3y ago
iLoveCoffee

How can I fix my SASS List?

$rainbow: #dc3545, #fd7e14, #ffc107, #198754, #0d6efd, #6610f2, #8F00FF
@each $color in $rainbow
    .#{$color}
        background-color: #{$color}
$rainbow: #dc3545, #fd7e14, #ffc107, #198754, #0d6efd, #6610f2, #8F00FF
@each $color in $rainbow
    .#{$color}
        background-color: #{$color}
I am afraid, I am doing some syntax mistake for this code: 
$rainbow: #dc3545, #fd7e14, #ffc107, #198754, #0d6efd, #6610f2, #8F00FF
$rainbow: #dc3545, #fd7e14, #ffc107, #198754, #0d6efd, #6610f2, #8F00FF
9 Replies
MarkBoots
MarkBoots•3y ago
you are tying to create classnames with hexcolor. for example 
.#dc3545 {
  background-color: #dc3545
}
.#dc3545 {
  background-color: #dc3545
}
lassnames can not have a # or start with a integer
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
MarkBoots
MarkBoots•3y ago
i was just about to show the same approach but with color names 😉 
$rainbow: (
  "red": #de0000,
  "orange": #fe622c,
  "yellow": #fef600,
  "green": #00bc00,
  "blue": #009cfd,
  "indigo": #000084,
  "violet": #2c009c
);

@each $key, $value in $rainbow {
  .#{$key} {
    background-color: $value;
  }
}

/* will render as
.red { background-color: #de0000; }
*/
$rainbow: (
  "red": #de0000,
  "orange": #fe622c,
  "yellow": #fef600,
  "green": #00bc00,
  "blue": #009cfd,
  "indigo": #000084,
  "violet": #2c009c
);

@each $key, $value in $rainbow {
  .#{$key} {
    background-color: $value;
  }
}

/* will render as
.red { background-color: #de0000; }
*/
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
iLoveCoffee
iLoveCoffeeOP•3y ago
@MarkBoots @Zyruks Thanks, this code is working 
$rainbow: (red: #dc3545, orange: #fd7e14, yellow: #ffc107, green: #198754, blue: #0d6efd, indigo: #6610f2, violet: #8F00FF)
@each $color, $value in $rainbow
    .#{$color}
        background-color: $value
$rainbow: (red: #dc3545, orange: #fd7e14, yellow: #ffc107, green: #198754, blue: #0d6efd, indigo: #6610f2, violet: #8F00FF)
@each $color, $value in $rainbow
    .#{$color}
        background-color: $value
And I am getting this result: 
.red {
    background-color: #dc3545;
}
.orange {
    background-color: #fd7e14;
}
.yellow {
    background-color: #ffc107;
}
.green {
    background-color: #198754;
}
.blue {
    background-color: #0d6efd;
}
.indigo {
    background-color: #6610f2;
}
.violet {
    background-color: #8F00FF;
}
.red {
    background-color: #dc3545;
}
.orange {
    background-color: #fd7e14;
}
.yellow {
    background-color: #ffc107;
}
.green {
    background-color: #198754;
}
.blue {
    background-color: #0d6efd;
}
.indigo {
    background-color: #6610f2;
}
.violet {
    background-color: #8F00FF;
}
MarkBoots
MarkBoots•3y ago
look at Zyruks response. he doest that by naming the keys with a number.
iLoveCoffee
iLoveCoffeeOP•3y ago
Got it 😉 
$rainbow: (1: #dc3545, 2: #fd7e14, 3: #ffc107, 4: #198754, 5: #0d6efd, 6: #6610f2, 7: #8F00FF)
@each $color, $value in $rainbow
    .grid-#{$color}
        background-color: $value
$rainbow: (1: #dc3545, 2: #fd7e14, 3: #ffc107, 4: #198754, 5: #0d6efd, 6: #6610f2, 7: #8F00FF)
@each $color, $value in $rainbow
    .grid-#{$color}
        background-color: $value
MarkBoots
MarkBoots•3y ago
other options would be 
$rainbow: #de0000,#fe622c,#fef600,#00bc00,#009cfd,#000084,#2c009c;
@for $i from 1 through length($rainbow) {
  .grid-#{$i} {
    background-color: nth($rainbow, $i)
  }
}
$rainbow: #de0000,#fe622c,#fef600,#00bc00,#009cfd,#000084,#2c009c;
@for $i from 1 through length($rainbow) {
  .grid-#{$i} {
    background-color: nth($rainbow, $i)
  }
}
iLoveCoffee
iLoveCoffeeOP•3y ago
@MarkBoots This one is so cool, for the first time saw practical use of length & nth in SASS.

Did you find this page helpful?