CODEWITHSUNDEEP
csssass
malcoauri
malcoauri

Reputation: 12189

Scss selector for two classes on the same item

There is piece of code:

.number__icon-container {
   display: flex;
   align-items: center;
   border-bottom: 1px solid;
   padding-left: 8rem;
   border-color: black.

   &_error  {
      border-color: red;
   }
}

If there is some div with number__icon-container_error class it will have red border color but it's not good for me. I need setup red border color for div if it has number__icon-container_error and number__icon-container_focus classes at the same time. How can I do it? Thanks!

Upvotes: 1

Views: 2819

Answers (1)

Amaury Hanser
Amaury Hanser

Reputation: 3456

You want to get the selector : .number__icon-container_error.number__icon-container_focus starting with this class .number__icon-container.

What you need is the interpolation bracket #{} because two touching ampersands are invalid in Sass. Here is an article on css-tricks.com.

You can write: 

  .number__icon-container {
    border-color: black;
      &_error#{&}_focus  { // See the use of the interpolation bracket ?
      border-color: red;
    }
  }

It will compile:

.number__icon-container {
  border-color: black;
}
.number__icon-container_error.number__icon-container_focus {
  border-color: red;
}

Upvotes: 7

Related Questions