SASS include variables in an @each loop

Question

I have a SASS mixin set up to loop through a bank of colours and apply them to specific elements when the body has a specific data colour. This is all working fine but I'm curious to know if instead of using 'blue, green, red, purple, orange' if you can use variables as the colours too; '$blue, $green, $red' etc. which have varied hex values.

Any suggestions?

I have this currently...

$blue: #003fb8;
$green: #005f30;
$red: #fe5053;
$purple: #5f0d82;
$orange: #ff6d00;

@mixin coloured-elements($color) {
    a:hover, 
    a.site-title,
    nav.main ul li.active a,
    .projects--layout .project h3 {
        color: $color;
    }
}

$colors_names: blue, green, red, purple, orange;
$colors_variables: $blue, $green, $red, $purple, $orange;
@each $color in $colors_variables {
    body[data-colour="#{$color}"] {
        @include coloured-elements($color);
    }
}

Which outputs the below... but how can I use the $colors_name as the data attribute and not the hex value?

body[data-colour="#003fb8"] a:hover,
body[data-colour="#003fb8"] a.site-title,
body[data-colour="#003fb8"] nav.main ul li.active a,
body[data-colour="#003fb8"] .projects--layout .project h3 {
  color: #003fb8;
}

body[data-colour="#005f30"] a:hover,
body[data-colour="#005f30"] a.site-title,
body[data-colour="#005f30"] nav.main ul li.active a,
body[data-colour="#005f30"] .projects--layout .project h3 {
  color: #005f30;
}

body[data-colour="#fe5053"] a:hover,
body[data-colour="#fe5053"] a.site-title,
body[data-colour="#fe5053"] nav.main ul li.active a,
body[data-colour="#fe5053"] .projects--layout .project h3 {
  color: #fe5053;
}

body[data-colour="#5f0d82"] a:hover,
body[data-colour="#5f0d82"] a.site-title,
body[data-colour="#5f0d82"] nav.main ul li.active a,
body[data-colour="#5f0d82"] .projects--layout .project h3 {
  color: #5f0d82;
}

body[data-colour="#ff6d00"] a:hover,
body[data-colour="#ff6d00"] a.site-title,
body[data-colour="#ff6d00"] nav.main ul li.active a,
body[data-colour="#ff6d00"] .projects--layout .project h3 {
  color: #ff6d00;
}

I think this is what you're looking for http://stackoverflow.com/questions/16083292/sass-scss-object-key-value-loop — Stephen C, Feb 21 '17 at 19:51

score 1 · Accepted Answer · answered Feb 21 '17 at 20:04

I believe this is what you're looking for. A key value stored on a variable.

$blue: (
  blue,
  #003fb8
);

$green: (
  green,
  #005f30
);

$red: (
  red,
  #fe5053
);

$purple: (
  purple,
  #5f0d82
);

$orange: (
  orange,
  #ff6d00
);


@mixin coloured-elements($color) {
  a:hover,
  a.site-title,
  nav.main ul li.active a,
  .projects--layout .project h3 {
    color: $color;
  }
}

$colors_variables: $blue, $green, $red, $purple, $orange;

@each $key, $value in $colors_variables {
  body[data-colour="#{$key}"] {
    @include coloured-elements($value);
  }
}

which will translate to

body[data-colour="blue"] a:hover,
body[data-colour="blue"] a.site-title,
body[data-colour="blue"] nav.main ul li.active a,
body[data-colour="blue"] .projects--layout .project h3 {
  color: #003fb8;
}

body[data-colour="green"] a:hover,
body[data-colour="green"] a.site-title,
body[data-colour="green"] nav.main ul li.active a,
body[data-colour="green"] .projects--layout .project h3 {
  color: #005f30;
}

body[data-colour="red"] a:hover,
body[data-colour="red"] a.site-title,
body[data-colour="red"] nav.main ul li.active a,
body[data-colour="red"] .projects--layout .project h3 {
  color: #fe5053;
}

body[data-colour="purple"] a:hover,
body[data-colour="purple"] a.site-title,
body[data-colour="purple"] nav.main ul li.active a,
body[data-colour="purple"] .projects--layout .project h3 {
  color: #5f0d82;
}

body[data-colour="orange"] a:hover,
body[data-colour="orange"] a.site-title,
body[data-colour="orange"] nav.main ul li.active a,
body[data-colour="orange"] .projects--layout .project h3 {
  color: #ff6d00;
}

SASS include variables in an @each loop

1 Answers1