CODEWITHSUNDEEP
csssass
Taha Azzabi
Taha Azzabi

Reputation: 2570

Remove portion of duplicated SASS code in nesting class

What i want to achieve with normal CSS:

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important;
}
.reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
  border-color: var(--v-primary-base);
}

How i've written with SASS:

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;
  &:not(.error--text) , &:not(.error--text) fieldset {
    border-color: var(--v-primary-base);
  }
}

My question :

As you noticed &:not(.error--text) is repeated twice in SASS, I wonder if there is a trick to simplify this ?

Upvotes: 0

Views: 71

Answers (1)

Yaroslav Trach
Yaroslav Trach

Reputation: 2011

You can use &:not(.error--text) like parent level and use it in nested selectors (&, fieldset) to omit code duplicates:

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;

  &:not(.error--text) {
    &, fieldset {
      border-color: var(--v-primary-base);
    }
  }
}

Output:

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important; }
  .reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
    border-color: var(--v-primary-base); }

Another way, you can do next:

You can try to use SASS Placeholder approach, in case of using placeholder selector to extend, border-primary-base will not render in CSS output:

%border-primary-base {
  border-color: var(--v-primary-base);
}

.reduit__search-input {
  border-width:2px ;
  border-style: solid;
  border-radius: 0% !important;

  &:not(.error--text) {
    @extend %border-primary-base;

    fieldset {
      @extend %border-primary-base;
    }
  }
}

Output:

.reduit__search-input:not(.error--text), .reduit__search-input:not(.error--text) fieldset {
  border-color: var(--v-primary-base); }

.reduit__search-input {
  border-width: 2px;
  border-style: solid;
  border-radius: 0% !important; }

Upvotes: 1

Related Questions