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

SASS包含@each循环中的变量

1 个答案: