Как применить объединенные классы в другом классе, используя Less? - PullRequest
Новая
       4

Как применить объединенные классы в другом классе, используя Less?

8 голосов
/ 28 сентября 2011

Допустим, у меня есть следующая настройка Less: 

.box {
 border: 1px solid #333;
 &.error {
  background-color: Red;        
 }
}

Если я хотел объявить другой класс, который применил полный стиль .box.error, например, .error-box, каков правильный синтаксис?

Если я использую: 

.error-box {
 .box.error;
}

Все, что я получаю, это красный фон без рамки.Я пробовал много разных комбинаций, но всегда получаю синтаксическую ошибку.

1 Ответ

16 голосов
/ 28 сентября 2011

Я подключил ваш меньше как так: 

.box {
   border: 1px solid #333;
   &.error {
      background-color:red; 
   }
}

.error-box {
    .box;
}

и вывод CSS был таким: 

.box {
  border: 1px solid #333;
}
.box.error {
  background-color: red;
}
.error-box {
  border: 1px solid #333;
}
.error-box.error {
  background-color: red;
}

Вы хотели, чтобы класс .error-box самостоятельно получил оба стиля? Единственный способ, которым я могу думать об этом, будет: 

.error-bg {
    background:red;
}

.box {
    border:1px solid #333;
    &.error {
        .error-bg;
    }
}

.error-box {
    .box;
    .error-bg;
}
...