обернуть определения .less css в пространство имен - PullRequest
Новая
       3

обернуть определения .less css в пространство имен

21 голосов
/ 27 ноября 2011

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

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

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

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

Ответы [ 5 ]

23 голосов
/ 10 июня 2012

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

  1. Редактировать bootstrap.css / bootstrap-responsive.css

    .tb {
  // copy/paste the entire bootstrap.css
}

  2. Перекомпилируйте с использованием less или используйте онлайн-компилятор less - http://winless.org/online-less-compiler

  3. Отредактируйте теперь скомпилированный файл и измените body {} CSS-декларации на tb {}.

  4. Используйте новый файл CSS.

  5. Поместите свой «загруженный» контент в <div class='tb'></div>

11 голосов
/ 27 ноября 2011
В документации

LESS есть раздел о пространствах имен .

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

#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;
}
4 голосов
/ 17 мая 2012

Вот как я это сделал. Это происходит в корне папки начальной загрузки, которая загружена или клонирована из 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

3 голосов
/ 12 февраля 2013

Вот как я это сделал, основываясь на приведенной выше вилке Майгиса github:

bootstrap-ns.less: 

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

namespace.less: 

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

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

0 голосов
/ 09 августа 2014

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

...