将 .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 {
   // 复制/粘贴整个 bootstrap.css
   }

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

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

4. 使用新的 CSS 文件。

5. 将“引导”内容放入

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

Answer 3

我就是这样做的。这发生在下载的或从 git 克隆的 bootstrap 文件夹的根目录中。

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

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

## ./style.less

@import "less/namespace.less";

.namespace {
  #ns > .twitter;
}

然后运行 ​​less style.less >样式.css

Answer 4

以下是我的做法，基于上面的 majgis 的 github 分支：

bootstrap-ns.less:

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

namespace.less:

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

然后您在 html 页面中引用 bootstrap-ns.less 。这是用 dotLESS 测试的。

Answer 5

如果您可以控制编译参数，只需将 strictImports 设置为 false 并按照您的预期工作，一切都应该没问题。考虑查看 less-strictimports 或在此 问题。