我正在将一个电子应用程序迁移到一个网络浏览器应用程序中,我遇到了一些我以前从未见过的 scss 样式。 大多数选择器使用没有任何意义的 At-Rule。
它似乎生成了类名,但我很难理解是 SASS 功能还是其他一些库\包。
所有这些@b、@m 对我来说没有任何意义。
我用谷歌搜索但在 SCSS 文档上都找不到更好的信息。
/* Text inputs */
@b textInput {
@include inputBoxStyle;
@m small, s {
padding: 0.5rem;
border-radius: 3px;
}
@m large, l {
padding: 1rem;
font-size: 1.2rem;
border-width: 2px;
border-radius: 5px;
}
@m textOnly {
background-color: transparent;
border: none;
padding: 0 !important;
}
@m invalid, invalid:focus {
border-color: $pastelPink;
}
@e hiddenInteraction:not(:hover):not(:focus):not(:active) {
@include inputHiddenInteraction;
}
}
/* Selects */
@b select {
position: relative;
select {
@include inputBoxStyle;
padding-right: 1.6rem;
appearance: none;
}
&:after {
position: absolute;
top: calc(50% - (1em / 2));
right: 1rem;
font-family: 'FontAwesome', serif;
font-size: 1rem;
line-height: 1em;
content: '\f078';
color: $ourWhite;
pointer-events: none;
}
最佳答案
多亏了另一位开发人员的帮助,我才知道这个语法是包的一部分:https://www.npmjs.com/package/postcss-atrule-bem
使用 npm 包采用的相同 SASS 嵌套,您可以在您的 IDE 中找到并替换 @b block 为 .block,@e 元素为 &__element 和 @m 修饰符为 &--modifier。
关于css - SCSS 中创建-扩展类名的未知@规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56704416/