Sass中如何覆盖Mixin属性避免生成重复CSS类？

你当前的问题是因为Sass的Mixin会将内部包裹的&选择器规则完整插入到调用位置，而你在Mixin外部定义的display: block会生成一个新的独立.links a选择器规则，所以最终输出了两个相同的类。

方案1：给Mixin添加可选参数（推荐） #

通过给Mixin增加一个带默认值的$display参数，调用时传入需要的值直接覆盖默认样式，这样能生成单一的选择器规则，且不会出现重复属性。

修改后的Mixin代码：

@mixin links($link-color, $hover-color, $visited-color, $display: inline-block) {
  & {
    color: $link-color;
    display: $display;

    &:visited {
      color: $visited-color;
    }

    &:hover {
      color: $hover-color;
      text-decoration: underline;
    }
  }
}

调用代码：

.links a {
  @include links(red, green, black, block);
}

最终输出的CSS：

.links a {
  color: red;
  display: block;
}

.links a:visited {
  color: black;
}

.links a:hover {
  color: green;
  text-decoration: underline;
}

方案2：调整Mixin结构，让属性在同一规则内 #

如果不想修改Mixin参数，可以去掉Mixin内部的&包裹，直接输出属性，这样Mixin的属性和你添加的外部属性会处于同一个选择器规则中，浏览器会自动取后面的属性值（虽然CSS里会保留两个display属性，但不影响渲染效果）。

修改后的Mixin代码：

@mixin links($link-color, $hover-color, $visited-color) {
  color: $link-color;
  display: inline-block;

  &:visited {
    color: $visited-color;
  }

  &:hover {
    color: $hover-color;
    text-decoration: underline;
  }
}

调用代码：

.links a {
  @include links(red, green, black);
  display: block;
}

输出的CSS：

.links a {
  color: red;
  display: inline-block;
  display: block;
}

.links a:visited {
  color: black;
}

.links a:hover {
  color: green;
  text-decoration: underline;
}

方案3：使用@content嵌入覆盖属性 #

把@content放到Mixin的主选择器内部，这样你传入的覆盖属性会和Mixin的基础属性处于同一规则中，效果和方案2类似：

修改后的Mixin代码：

@mixin links($link-color, $hover-color, $visited-color) {
  & {
    color: $link-color;
    display: inline-block;
    @content;

    &:visited {
      color: $visited-color;
    }

    &:hover {
      color: $hover-color;
      text-decoration: underline;
    }
  }
}

调用代码：

.links a {
  @include links(red, green, black) {
    display: block;
  }
}

输出的CSS和方案2一致。

内容的提问来源于stack exchange，提问作者Keith