Как правильно записать вложенность в scss?

Question

[Evtera]

Здравствуйте. Есть запись вида

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

Как можно правильно заменить префиксы .select__ , используя вложенность и знак & в данном случае?

Comments

[Ankhena]

Первый select это тег или вы точку забыли?
Но в любом случае где-то должен быть класс блока .select

Итого:

.select {

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

   &__label {
      border-bottom: none;
    }

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

Только так писать не очень хорошо, потому что не удобно искать по проекту и лишняя итерация поиска. А если проект не разбит на файлы и элемент называется __item, то и вовсе безнадежно.

[inkShio]

Ankhena, то что ты написал будет .open__label и .open__arrow

[Ankhena]

inkShio, ну да, вы же не форматируете нормально код, не заметила селектор.

.select {
  $this: &;
  /* when select open add class OPEN */
  &.open {
    z-index: 2;

    #{$this}__dropdown {
      display: block;
      background-color: white;
    }
  }

  &__label {
    border-bottom: none;
  }

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

[Ankhena]

inkShio, если внутри open они все должны быть, то подвиньте соответственно

.select {
  $this: &;
  /* when select open add class OPEN */
  &.open {
    z-index: 2;

    #{$this}__dropdown {
      display: block;
      background-color: white;
    }


    #{$this}__label {
      border-bottom: none;
    }

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

[Ankhena]

Но в идеале open должен быть модификатором, а не блоком. Тогда и специфичность будет пониже.

[Evtera]

Ankhena, интересный вариант с использованием переменной. Не думал об этом даже

Answer 1

[inkShio]

можешь сделать переменную и просто ее подставлять

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

Или вот тебе еще один вариант

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

Comments

[Evtera]

вариант с переменной хорош. А про второй я знал, но там очевидные минусы )

[Сергей delphinpro]

Evtera, В данном случае, как раз второй вариант более предпочтителен. Он более читабелен, и с ним меньше шансов "выстрелить себе в ногу", а потом ломать голову, почему стиль не применяется. Визуальную отбивку блока в этом случае лучше сделать комментариями.