1

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!

3
  • 2
    Hello, You could use this selector &_error#{&}_focus instead of &_error. Feb 10, 2019 at 8:52
  • @AmauryHanser That is the correct answer :) I've reopened the question because the duplicate actually points to the incorrect solution.
    – Terry
    Feb 10, 2019 at 8:54
  • @Terry Hi. But do you think that it needs to be posted as an answer ? Feb 10, 2019 at 8:56

1 Answer 1

7

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.