Вложение нескольких классов одного типа в одного родителя

Question

Я хочу создать классы, как показано ниже:

.colored{
     &{
          .red{background-color:red;}
          .blue{background-color:blue;}
          .gray{background-color:gray;}
      }
}

и это не работает, но если я напишу так:

.colored{
          &.red{
              background-color:red;
          }
          &.blue{
              background-color:blue;
          }
          &.gray{
              background-color:gray;
          }
}

тогда это работает. Есть ли причины, по которым первая версия не работает должным образом?

Answer 1

Причина:

Это происходит из-за того, как вложенность работает (и должна работать) в Less. Когда вы вкладываете селектор под другой селектор, внутренний селектор считается применимым для элемента, который является дочерним по отношению к элементу, представленному внешним селектором.

Ниже приведен код

.colored{
    &{
        .red{background-color:red;}
        .blue{background-color:blue;}
        .gray{background-color:gray;}
    }
}

эквивалентно следующему (потому что & будет заменен родительским селектором, который .colored)

.colored{
    .red{background-color:red;}
    .blue{background-color:blue;}
    .gray{background-color:gray;}
}

Теперь, как я упоминал ранее, это будет компилировать в .colored .red, .colored .blue, .colored .gray (обратите внимание на пространство между селекторами).

С другой стороны, когда вы вставляете & непосредственно перед .red.blue.gray, это означает, что родительский селектор и вложенный селектор применяются к одному и тому же элементу (а не дочернему элементу). Селекторы, которые он выведет .colored.red, .colored.blue, .colored.gray (обратите внимание, что там нет места).

---

Решение:

Это тот же код, что и в вашем вопросе, и это рекомендуемое решение. Я отправляю это снова в ответе только, чтобы сделать это полным.

.colored{
    &.red{
        background-color:red;
    }
    &.blue{
        background-color:blue;
    }
    &.gray{
        background-color:gray;
    }
}