SASS在@each循环中包含变量

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;
}

Answer 1

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;
}