根类不被 SASS 读取，只有那些带有 & 符号的类才会读取

Question

我有一个带有 & 符号的 sass/css 类，它与 VueJS 结合使用。我想知道的是，在 & 符号上分配的 CSS 属性正在工作，但浏览器没有检测到根元素本身。

<style lang="scss" scoped>
.curved-input {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
  &__lg {
    width: 300px;
  }
  &__sm {
    width: 150px;
  }
}
</style>

这是解释，浏览器似乎检测到width: 300px或width: 150px，但没有检测到border-radius, height, margin-right。

<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>

文本框宽度已更改，但在浏览器工具上查看其他属性时，浏览器不会读取它们。我在这里错过了什么吗？

我的目标不是将其编码为class="curved-input curved-input__lg而是在继承父属性（曲线输入）时仅使用curved-input__lg或curved-input__sm。

Answer 1

您可以使用

@extend来避免向标记添加其他类或（某些）重复代码，如果这是您的目标。

.curved-input {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}
.curved-input {
  &__lg {
    @extend .curved-input;
    width: 300px;
  }
  &__sm {
    @extend .curved-input;
    width: 150px;
  }
}

这将生成以下 CSS

.curved-input, 
.curved-input__sm, 
.curved-input__lg {
  border-radius: 5px;
  height: 50px;
  margin-right: 1rem;
}
.curved-input__lg {
  width: 300px;
}
.curved-input__sm {
  width: 150px;
}

Answer 2

这是因为您还必须声明curved-input类。所以你的类属性将看起来像class="curved-input curved-input__lg".

如果你完整地写出你的CSS，你会得到这样的东西：

.curved-input {
   border-radius: 5px;
   height: 50px;
   margin-right: 1rem;
}
.curved-input__lg {
   width: 300px;
}
.curved-input__sm {
   width: 150px;
}

考虑到这一点，您将看到您还必须添加类curved-input。

Answer 3

如果你想这样写，试着把第一行改成：

[class*="curved-input"]