CODEWITHSUNDEEP
csssass
Freestyle09
Freestyle09

Reputation: 5508

SCSS - how to write multiple classes with & in one html tag

I want to rewrite some vuetify rules and I want to change background of button to some other color. I can change this with SASS variables builded in vuetify by default but I am curious how to write this selector is SCSS using &

.v-btn {
  text-transform: initial;
  &.v-btn--disabled.v-btn--has-bg {
    background-color: rgba(0,0,0,.6) !important;
    color: var(--v-text-light-base) !important;
  }
}

.v-btn is repeated 3 times and is there any way to write something like this?

.v-btn {
  text-transform: initial;
  &.&--disabled.&--has-bg {
    background-color: rgba(0,0,0,.6) !important;
    color: var(--v-text-light-base) !important;
  }
}

& works with whitespaces &--disabled &--has-bg between classes but I need to connect multiple classes into one html element. Is there any way to build this using & ?

Upvotes: 0

Views: 187

Answers (1)

mikesteeghs
mikesteeghs

Reputation: 175

You could assign & to a variable so you can re-use this variable in the class name. This is what you get:

.v-btn {
  $self: &;
  text-transform: initial;

  #{$self}.#{$self}--disabled.#{$self}--has-bg {
    background-color: rgba(0,0,0,.6) !important;
    color: var(--v-text-light-base) !important;
  }
}

Upvotes: 1

Related Questions