作者:怪兽锅锅PENGL | 来源:互联网 | 2022-12-10 14:24
我是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);
}
}
}
我知道“&”是插入父选择器的一种方式。但是“-”有什么作用?
1> Amadan..:
&
指代父级,因此除非嵌套,否则这是没有意义的。但是想象一下当它嵌套在里面时会发生什么,例如.button
:
.button {
&--outline {
/* ... */
}
}
产生派生的类名:
.button--outline {
/* ... */
}
这将指示例如这样的元素:
tl; dr:--
绝对没有什么特别的。它什么也没做。它只是被串联。
2> kwiat1990..:
双连字符是BEM(块,元素,修饰符)方法中使用的修饰符,可帮助您组织样式表。它与Sass无关。
在这种情况下,它利用了Sass语法,可让您编写嵌套的选择器,这就是为什么采用这种方式编写的原因。另一种方式是:.block-or-element--outline {}
。