scss mixin 中的选择器有效吗？

CSS 语法一般是

selector {
 declarations ...
}

我主要看到 mixin 负责处理declaration part

example

@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?

是的，你当然可以在 mixin 中包含选择器，并且areSass 文档中的示例。第一个代码示例@mixin 和 @include https://sass-lang.com/documentation/at-rules/mixin页面实际上与您的示例非常相似，因为从类型选择器调用 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;
}