How to correctly write nesting in scss?

Question

Sass

Hello. There is a record like

select {

  /* when select open add class OPEN */
  &.open {
    z-index: 2;
    .select__dropdown {
      display: block;
      background-color: white;
    }

    .select__label {
      border-bottom: none;
    }

    .select__arrow {
      transition: 0.3s ease;
      transform: rotate(180deg);
    }
  }  
}

What is the proper way to replace .select__ prefixes using nesting and the & sign in this case?

Answer 1

you can make a variable and just substitute it

$self: "select";

.#{$self} {
  &.open {
    z-index: 2;
    .#{$self}__dropdown {
      display: block;
      background-color: white;
    }

    .#{$self}__label {
      border-bottom: none;
    }

    .#{$self}__arrow {
      transition: 0.3s ease;
      transform: rotate(180deg);
    }
  }
}

Or here's another option for you

.select {
  &.open {
    z-index: 2;
  }

  &.open &__dropdown {
    display: block;
    background-color: white;
  }

  &.open &__label {
    border-bottom: none;
  }

  &.open &__arrow {
    transition: 0.3s ease;
    transform: rotate(180deg);
  }
}