Обернуть определения без CSS в пространстве имен

Я хотел использовать twitter bootstrap CSS только в определенном элементе на моей веб-странице.

Я попытался сделать это, как в коде ниже. Но после компиляции этого файла в css ничего не выводилось. Если бы я переместил @import вне #my_div, тогда я получил все определения css для twitter boostrap.

#my_div {
    @import "../twitter_bootstrap/lib/bootstrap.less";
}

Как я могу пропустить пробел в файле less css?

Ответы

Ответ 1

Я не использую less на реальном сайте, и я не вручную делаю компиляцию, поэтому это своего рода "простая" версия. Это не так автоматизировано, как другие, но может применяться к некоторым пользователям.

Изменить bootstrap.css/bootstrap-responsive.css
```
.tb {
  // copy/paste the entire bootstrap.css
}
```
Перекомпилируйте с меньшим или используйте онлайн-компилятор - http://winless.org/online-less-compiler
Отредактируйте теперь скомпилированный файл и измените объявления body {} CSS на tb {}.
Используйте новый файл CSS.
Поместите свой загрузочный контент внутри <div class='tb'></div>

Ответ 2

В документации LESS имеется раздел namespaces.

Итак, вы можете определить свою библиотеку в отдельном документе:

#ns {
  .twitter () {
    // Instructions to be used later
    // Nothing will appear in compiled CSS except if called later (because of parenthesis)
  }
}

импортируйте этот файл в начале файла CSS для компиляции и используйте следующие инструкции:

#my_div {
  #ns > .twitter;
}

Ответ 3

Вот как я это сделал. Это происходит в корневой папке загрузочной папки, загружаемой или клонированной из git.

## ./less/namespace.css (New file)

#ns {
  .twitter() {
    @import "less/bootstrap.less";
  }
}

## ./style.less

@import "less/namespace.less";

.namespace {
  #ns > .twitter;
}

Затем запустите less style.less > style.css

Ответ 4

Вот как я это сделал, основываясь на майкгид-гитахбуке:

bootstrap-ns.less:

@import "namespace.less"
.bs {
    #ns > .twitter;
    }

namespace.less:

#ns {
  .twitter(){
    @import "bootstrap.less";
  }
}

Затем вы ссылаетесь на bootstrap-ns.less на странице html. Это было проверено с помощью dotLESS.

Ответ 5

если у вас есть контроль над параметрами компиляции, просто установите strictImports на false и работайте так, как вы планировали, все должно быть хорошо. рассмотрите less-strictimports или на этом issue.