在mixin中使用参数作为标记

Question

我该怎么做：

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

使用sass？

感谢您的帮助

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

使用interpolation：

@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;
}