为什么这个带有伪选择器的 sass mixin 不起作用？ [复制]答案

【问题标题】：Why doesn't this sass mixin with pseudo selectors work? [duplicate]为什么这个带有伪选择器的 sass mixin 不起作用？ [复制]
【发布时间】：2014-10-07 07:04:27
【问题描述】：

为什么这不起作用：

@mixin link($props) {
  &:link,
  &:visited { $props };
}

我不断收到此错误：

在 "...sited { $props ": 预期 ":" 之后的 CSS 无效，是 "};"

【问题讨论】：

标签： css sass

【解决方案1】：

语法有点不对，有几个地方，试试这样的：

@mixin link ($props) {
 &:hover,
 &:visited { color: $props; }
}

“颜色”可以是任何 CSS 规则。感觉这篇文章有几个不错的sass mixin例子可以参考：http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/

【讨论】：

如果我想做的不仅仅是颜色怎么办？喜欢... @include link(color: #fff; background: #000;);
@mixin 链接 ($color, $bgcolor) { &:hover, &:visited { color: $props;背景：$bgcolor} }
如果我想做更多的事情而不需要指定更多的变量怎么办？ @include link(display: block; width: 100px; height: 100px; color: #fff; background: url(awesome.jpg) no-repeat 0 0 / contain;); 我认为如果 mixin 可以做到这一点会更加灵活。
是的，就是这样。你能行的。再次，查看我在上面发布的链接以供参考。
实际上，查看上面 cimmanon 的重复问题导致我使用@content 而不是使用参数$props。这就像在 javascript 中使用参数而不是参数：@mixin link { &:link, &:visited { @content }; }