@Import меньше файлов в ограниченном объеме

Я хочу импортировать все стили из другого меньшего файла, но в ограниченную область. Я пробую это:

"моя-site.less"

.wrapper-class {
    @import "path/to/styles.less";
}

Но это не работает вообще. Я использую опцию less.js на основе браузера, и я могу видеть инструкцию GET, которая запускается, когда она действительно импортирует. Но полученный CSS не содержит ни одного из стилей с другого листа. Если я так делаю, он работает:

.wrapper-class 
{
    /* ... */
}
@import "path/to/styles.less";

Но это побеждает первоначальную цель. Итак, есть ли способ сделать ограниченный охват @import, как это в Less? Спасибо!

Ответ 1

Согласно css-spec, @import -declaration должно появиться перед всеми другими объявлениями в css файле. Поэтому ожидается, что ваш @import внутри правила будет терпеть неудачу. Я думаю, что @import ing в конце файла не будет работать доброжелательно для браузеров-поставщиков.

Я думаю, что LESS будет соблюдать те же правила.

EDIT: вопрос в том, почему вы хотите, чтобы эти стили были охвачены? При соответствующих декларациях это не обязательно.

Ответ 2

Поскольку этот вопрос был отправлен и дан ответ, предварительные процессоры реализовали @import с областью. Теперь это работает в LESS, SASS и Stylus.

Пример:

.lt-ie9 {
  @import "ie8-fixes";
}

Ответ 3

Синтаксис LESS (и CSS) не позволяет @imports в правила CSS. Попробуйте использовать пространство имен:

styles.less

.styles {
    [your code]
}

Затем замените @import для пространства имен:

.wrapper-class {
    .styles;
}

Ссылка:

http://lesscss.org/features/