sass - 在 mixin 中使用参数作为标签

Question

我怎样才能做到这一点 ：

@mixin addMargin($el) {
    $el {
        margin-left: 5px;
    }
    $el:hover {
        margin-left: 10px;
    }
}

使用萨斯？

谢谢你的帮助

Answer 1

在 mixin 中，您不仅可以直接向元素添加属性，还可以添加更多规则：

@mixin addMargin {
  margin-left: 5px;

  &:hover {
    margin-left:10px;
  }
}

请注意，您必须在前面加上前缀:hover，&以便我们获得此规则：

#something-with-the-mixin-applied:hover

代替

#something-with-the-mixin-applied :hover

Answer 2

使用插值：

@mixin addMargin($el) {
  #{$el} {
    margin-left: 5px;
  }
  #{$el}:hover {
    margin-left: 10px;
  }
}

@include addMargin(h1);

但是 Yogu 是对的，你在这里不需要它。你可以省略选择器，只在你的 mixin 中留下指令，然后在选择器中应用 mixin：

@mixin addMargin {
  margin-left: 5px;

  &:hover {
    margin-left:10px;
  }
}

h1 {
  @include addMargin;
}