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

debugcn 发表于 Dev

低音提琴手

我有一个带有 & 符号的 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同时继承父属性（曲线输入）。

芜菁

你可以使用@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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。