scss中的双连字符是什么？答案

【问题标题】：What is the double hyphen in scss?scss中的双连字符是什么？
【发布时间】：2019-06-29 03:32:12
【问题描述】：

我是 SASS 新手，遇到了一些我不理解的东西。在我的一个项目中，我看到开发人员设置了一些继承，如下所示：

&--outline,
&--outline:focus,
&--outline:active {
    background-color: #fff;
    color: color($colors, navia_orange, base);
    border: 1px solid color($colors, navia_orange, base);

    &.button-md, &.button-ios {
        box-shadow: unset;

        &.activated {
            background-color: #fff;
            color: color($colors, navia_orange, base);
            border: 1px solid color($colors, navia_orange, base);
        }
    }
}

我知道“&”是插入父选择器的一种方式。但是 '--' 有什么作用呢？

【问题讨论】：

标签： sass

【解决方案1】：

& 指的是父级，所以这是没有意义的，除非嵌套。但是想象一下当它嵌套在内部时会发生什么，例如.button:

.button {
  &--outline {
    /* ... */
  }
}

产生一个派生类名：

.button--outline {
  /* ... */
}

这将表明例如像这样的元素：

<button class="button--outline">...</button>

tl;dr：-- 绝对没有什么特别之处。它不做任何事情。它只是被连接起来。

【讨论】：

这是一个很好的答案，但我不同意“绝对没什么特别的”。我可以看到，可能基于您团队的 scss 偏好和/或 scss 标准，它没有价值，甚至可能基于某些个人偏好。也就是说，如果您是一个仍然希望保持清晰易读的速记员，那么这可能会在您的团队的 scss 标准中证明是一个有价值的规则/模式/实践。你对它的解释的回答是正确的，我肯定给了它一票。
@anothercoder 我的意思是根据 SCSS 语法它没有意义（相对于 &，它在 SCSS 中具有定义的语义），就像 // TODO 注释在 JavaScript 中没有意义一样。它旨在回答标题中的字面问题：“scss 中的双连字符是什么？”。它最好对程序员有意义，否则没人会使用它。

【解决方案2】：

双连字符是BEM (Block, Element, Modifier) 方法中使用的修饰符，可帮助您组织样式表。这与萨斯无关。

在这种情况下，它利用了 Sass 语法，它允许您编写嵌套选择器，这就是它以这种方式编写的原因。另一种方式是：.block-or-element--outline {}。

【讨论】：