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

问题描述

类似于required<T>和Partial<T>映射的打字稿类型，我们在SCSS中有任何东西可以使类的所有属性成为强制性。

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

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

在其他文件中，我必须将此样式赋予来自其他代码库的Web组件。因此，要覆盖它，我需要标记!important。因此，我想扩展此类.body2，而不是手动重写相同的行。

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

，但这不会覆盖Web组件的默认样式，因为属性未标记为!important。所以我只想知道SCSS中是否有一个mixin或函数可以帮助我将!important应用于类的所有属性，可能与打字稿中的required<T>和Partial<T>类似

解决方法

您可以使用带有参数的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参数以添加！important

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

mixins mixins sass sass