Я хочу импортировать все стили из другого меньшего файла, но в ограниченную область. Я пробую это:
"моя-site.less"
.wrapper-class {
@import "path/to/styles.less";
}
Но это не работает вообще. Я использую опцию less.js на основе браузера, и я могу видеть инструкцию GET, которая запускается, когда она действительно импортирует. Но полученный CSS не содержит ни одного из стилей с другого листа. Если я так делаю, он работает:
.wrapper-class
{
/* ... */
}
@import "path/to/styles.less";
Но это побеждает первоначальную цель. Итак, есть ли способ сделать ограниченный охват @import, как это в Less? Спасибо!
Согласно css-spec, @import -declaration должно появиться перед всеми другими объявлениями в css файле. Поэтому ожидается, что ваш @import внутри правила будет терпеть неудачу. Я думаю, что @import ing в конце файла не будет работать доброжелательно для браузеров-поставщиков.
Я думаю, что LESS будет соблюдать те же правила.
EDIT: вопрос в том, почему вы хотите, чтобы эти стили были охвачены? При соответствующих декларациях это не обязательно.
Поскольку этот вопрос был отправлен и дан ответ, предварительные процессоры реализовали @import с областью. Теперь это работает в LESS, SASS и Stylus.
Пример:
.lt-ie9 {
@import "ie8-fixes";
}
Синтаксис LESS (и CSS) не позволяет @imports в правила CSS.
Попробуйте использовать пространство имен:
.styles {
[your code]
}
Затем замените @import для пространства имен:
.wrapper-class {
.styles;
}
Ссылка: