首页 文章

SASS包含@each循环中的变量

提问于
浏览
0

我有一个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;
}

1 回答

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

相关问题