在命名空间中包装.less css定义

Question

我想在我的网页中的特定元素中使用twitter bootstrap CSS.

我试着像下面的代码那样做.但在将其编译为css文件后,没有输出任何内容.如果我搬到@import外面,#my_div那么我得到了twitter boostrap的所有CSS定义.

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

我如何命名less css文件？

Answer 1

我没有less在现场使用,也没有手动进行编译,所以这是一个"简单"的版本.它不像其他用户那样自动化,但可能适用于某些用户.

1. 编辑bootstrap.css/bootstrap-responsive.css

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

2. 用less重新编译或使用在线较少的编译器 - http://winless.org/online-less-compiler

3. 编辑现在编译的文件并将body {}CSS声明更改为tb {}.

4. 使用新的CSS文件.

5. 将您的"自举"内容放入 <div class='tb'></div>

Answer 2

LESS文档中有一个关于命名空间的部分.

所以你可以在一个单独的文档中定义你的lib:

#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;
}