scss mixin 中的选择器是否有效？答案

【问题标题】：Is selector inside a scss mixin valid?scss mixin 中的选择器是否有效？
【发布时间】：2019-10-26 00:52:50
【问题描述】：

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？

【问题讨论】：

没有引用，但如果它编译，那么它是有效的 SCSS。但是，我看不出这种做法有什么用处。

标签： html css sass

【解决方案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;
}

【讨论】：