SASS 在 @each 循环中包含变量

Question

我设置了一个 SASS mixin 来循环遍历一组颜色，并在正文具有特定数据颜色时将它们应用于特定元素。这一切都很好，但我很想知道如果你也可以使用变量作为颜色，而不是使用“蓝色、绿色、红色、紫色、橙色”； '$blue, $green, $red' 等具有不同的十六进制值。

有什么建议吗？

我现在有这个...

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

哪个输出以下...但是我如何使用 $colors_name 作为数据属性而不是十六进制值？

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

我相信这就是您正在寻找的。存储在变量中的键值。

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

这将转化为

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