css - 使用 SASS 进行嵌套数据切换

Question

我想知道是否可以在 SASS 中嵌套数据切换。 假设我要制作一些宽度和高度相同的按钮，但每个按钮的颜色不同。

是否可以让他们喜欢:

[data-toggle]{
   width:150px;
   height:50px;
   &=result{
     background:green;
   }
   &=create{
     background:red;
   }
}

Answer 1

不可能按照您建议的方式嵌套选择器。

一个解决方案是创建一个 data-toggle 值到背景颜色的 Sass 映射，然后使用 @each 循环迭代键值对:

// Base styling for elements with the [data-toggle] attribute
[data-toggle] {
  width: 150px;
  height: 50px;  
}

// Generate declarations for colored toggles
$data-toggle-colors: (
  'result': green,
  'create': red
);

@each $color in $data-toggle-colors {
  $key:   nth($color, 1);
  $value: nth($color, 2);

  [data-toggle=#{$key}] {
    background-color: $value;
  }
}

代码笔:https://codepen.io/anon/pen/Lkgxvv