Question

CSS语法通常是

selector {
 declarations ...
}

我主要看到mixin负责declaration部分

示例

@mixin border-radius($rad) {
 border-radius: $rad;
}

// and used like 

some-selector {
 @include border-radius(5px)
}

但是mixin本身可以返回一个完整的选择器

@mixin button {
  .button {
    color: red
  }
}

// now if I have button nested in any of my dom element I can say

selector-for-dom-element {
  @include button;
}

第二种情况是否有效的语法？

我已经看到它可以工作，但是不确定它是否已记录，我是否应该在生产中使用它。

为此，我只想确认其有效语法以及对此类声明的任何引用。

或者我做错了方法，除了使用extend以外，其他任何方法...

Answer 1

是的，您当然可以在 mixin 中包含选择器，并且在 Sass 文档中有示例。 @mixin and @include 页面上的第一个代码示例实际上与您的示例非常相似，因为从类型选择器调用 mixin，从而产生后代选择器。这是该示例的相关部分：

@mixin horizontal-list {
  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

编译为：

nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

你的例子使用了类选择器，但原理是一样的。这是编译好的 CSS：

selector-for-dom-element .button {
  color: red;
}

scss mixin内部的选择器有效吗？

1 个答案: