什么是scss中的双连字符？

Question

我是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);
        }
    }
}

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

Answer 1

&指代父级，因此除非嵌套，否则这是没有意义的。但是想象一下当它嵌套在里面时会发生什么，例如.button：

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

产生派生的类名：

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

这将指示例如这样的元素：

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

tl; dr：--绝对没有什么特别的。它什么也没做。它只是被串联。

Answer 2

双连字符是BEM（块，元素，修饰符）方法中使用的修饰符，可帮助您组织样式表。它与Sass无关。

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