SASS/SCSS mark all properies !important using mixin or function

user_6715606 0
Viewed 1447

Similar to Required<T> and Partial<T> mapped types of typescript do we have anything in SCSS where I can make all the properties of a class as mandatory.

To be more specific, here is the use case: I have a class .body2 in a _font.scss file

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

and in someother file I have to give this style to a web component which is from some other code base. Hence to override it I need to mark !important. So instead of re-writing the same lines manually I want to extend this class .body2. as

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

but this does not override the default style of web component as the properties are not marked as !important. So I just wanted to know is there a mixin or function in SCSS which can help me in applying !important to all the properties of a class may be somewhat similar to Required<T> and Partial<T> in typescript.

sass mixins css
1 Answers

You can use a mixin with parameter. Use false for default value.

@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;
}

Send true parameter for adding !important

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