SASS/SCSS标记所有属性！使用mixin或function时很重要

类似于

Required

和

Partial

映射类型的typescript，我们在SCSS中有什么可以使类的所有属性都成为必需的

更具体地说，以下是用例： 我在一个_font.scss文件中有一个class.body2

.body2 {
  font-size: var(--font-sm);
  line-height: rem(20px);
  font-family: var(--font-base);
  letter-spacing: -0.2%;
}

在另一个文件中，我必须将这种风格赋予来自其他代码库的web组件。 因此，要覆盖它，我需要标记

！重要信息

。 因此，我想扩展这个类，而不是手动重新编写相同的行。作为

 form input,
  textarea {
    @extend .body2;
    color: var(--white) !important;
  }

但这不会覆盖web组件的默认样式，因为属性未标记为

！重要信息

。

---

所以我只想知道SCSS中是否有一个mixin或函数可以帮助我应用

！重要信息

到类的所有属性可能与typescript中的

Required

和

Partial

有些相似。

您可以使用mixin with参数。使用

false

作为默认值

@mixin a($isImportant: false) {
  @if $isImportant {
    font-size: var(--font-sm) !important;
    line-height: rem(20px) !important;
    font-family: var(--font-base) !important;
    letter-spacing: -0.2% !important;
  } @else {
    font-size: var(--font-sm);
    line-height: rem(20px);
    font-family: var(--font-base);
    letter-spacing: -0.2%;
  }
}

form input,
textarea {
  @include a;
  color: var(--white) !important;
}

发送用于添加的

true

参数！重要的

form input,
textarea {
  @include a(true);
  color: var(--white) !important;
}

---

可以将mixin与参数一起使用。使用

false

作为默认值

@mixin a($isImportant: false) {
  @if $isImportant {
    font-size: var(--font-sm) !important;
    line-height: rem(20px) !important;
    font-family: var(--font-base) !important;
    letter-spacing: -0.2% !important;
  } @else {
    font-size: var(--font-sm);
    line-height: rem(20px);
    font-family: var(--font-base);
    letter-spacing: -0.2%;
  }
}

form input,
textarea {
  @include a;
  color: var(--white) !important;
}

发送用于添加的

true

参数！重要的

form input,
textarea {
  @include a(true);
  color: var(--white) !important;
}

---

谢谢你的回答，但我不是朝这个方向看谢谢你的回答，但我不是朝这个方向看你可以通过使用更具体的选择器覆盖样式-你不必使用

！重要信息

。“重要”主要用于最终用户样式表，以便它们可以覆盖站点。考虑一下，如果你应该对这一点很重要：你可以通过使用一个更具体的选择器来重写一个样式——你不必使用<代码>！重要信息。“重要”主要用于最终用户样式表，以便它们可以覆盖站点。考虑一下你是否应该对这件事重要：