Question

我想创建一个＆＃39;组＆＃39;根据body类添加某些颜色/样式的元素。

我使用SASS并且不想每次都要写相同的元素。

我知道下面的代码是错误的，但你明白了。

这样的事情可能吗？

@mixin coloured-elements {
    a:hover,
    a.site-title,
    .another-element
}
body.blue {
    @include coloured-elements {
        color: $blue;
    }
}
body.green {
    @include coloured-elements {
        color: $green;
    }
}
body.red {
    @include coloured-elements {
        color: $red;
    }
}
body.purple {
    @include coloured-elements {
        color: $purple;
    }
}
body.orange {
    @include coloured-elements {
        color: $orange;
    }
}

Answer 1

使彩色元素接受参数，然后定义颜色列表，迭代并动态创建所有内容。类似的东西：

@mixin coloured-elements($color) {
  a:hover, a.site-title, .another-element {
    color: $color
  }
}

$colors: blue, red, purple, orange;

@each $color in $colors {
  body.#{$color} {
    @include coloured-elements($color);
  }
}

请注意，我没有透露这一点，你可能需要调整它。检查文档以正确执行它。

如果你提供了一个codepen，我可以编辑答案。

编辑：

sass lists
sass hashmaps如果您想使用此数据结构
Control directives
Interpolation

Answer 2

使用＆amp;在选择'是'的孩子'之后。

.element1,
.element2 {
  body.orange & {
    color: orange;
  }
  body.blue & {
    color: blue;
  }
}

Answer 3

如果您将内容传递给mixin，则应使用@content：

@mixin coloured-elements {
    a:hover,
    a.site-title,
   .another-element { @content; }
}

在您的示例中（使用上面的mixin），您将获得以下输出：

body.blue a:hover,
body.blue a.site-title,
body.blue .another-element {
  color: blue;
}

body.green a:hover,
body.green a.site-title,
body.green .another-element {
  color: green;
}

body.red a:hover,
body.red a.site-title,
body.red .another-element {
  color: red;
}

body.purple a:hover,
body.purple a.site-title,
body.purple .another-element {
  color: purple;
}

body.orange a:hover,
body.orange a.site-title,
body.orange .another-element {
  color: orange;
}

Answer 4

您可以使用@each和#{}插值。使用 selectorName ， colorValue 对创建$valiable，然后在@each关键字之后将其放入in指令中，如下例所示。这些对解决了使用不同选择器名称和颜色值的问题，例如。 .red {color: #f00};代替.red{color:red}

$blue: blue, #42a5f5;
$green: green, #66bb6a;
$red: red, #f44336;
$purple: purple, #ba68c8;
$orange: orange, #f57c00;

a:hover, a.site-title, .another-element {
   @each $selector, $color in $blue, $green, $red, $purple, $orange {
      body.#{$selector} {
          color: $color;
      }
   }
}

CSS结果将是：

a:hover body.blue, a.site-title body.blue, .another-element body.blue {
  color: #42a5f5; 
}

a:hover body.green, a.site-title body.green, .another-element body.green {
  color: #66bb6a;
}

...等

SASS组元素可供重用

4 个答案: