Блог

Я использую WebCompiler в Visual Studio 2019 для компиляции меньшего количества файлов в моем проекте.

Следующая функция LESS заставляет VS отображать зеленые волнистые линии и предупреждение «Ожидается выбор для правила стиля» и указывает, что @{value} переменная «Не объявлена«. Однако проект будет успешно скомпилирован, и из него будет правильно скомпилировано меньше …

 @selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});
 

В CSS…

 .sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}
 

Я пробую другую, почти идентично отформатированную each функцию и получаю те же предупреждения, что и выше, но это НЕ будет успешно скомпилировано. Что я упускаю?

 @fontSizes: .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4;

each(@fontSizes, {
        
    .if-size-@{index} { 
        font-size: @{value}rem;
    }
});
 

Ожидаемый результат …

 .if-size-1 {
    font-size: .25rem;
}
.if-size-2 {
    font-size: .5rem;
}
.if-size-3 {
    font-size: .75rem;
}
.if-size-4 {
    font-size: 1rem;
}
.if-size-5 {
    font-size: 1.25rem;
}