在命名空间中包装一个.cless定义 [英] wrap a .less css definitions in a namespace

问题描述

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

我试着这样做，就像下面的代码。但在编译到css文件后没有输出。如果我移动 @import 在 #my_div 之外，那么我得到了twitter boostrap的所有css定义。

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

如何命名空间少css file

解决方案

我没有使用活的网站，我也不是手动进行编译所以这是一种简单的版本。它不像其他的自动化，但可能适用于一些用户。

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

     .tb {
    //复制/粘贴整个引导程序.css 
   } 
     




2. 重新编译或使用在线少编译器 - a href =http://winless.org/online-less-compiler =nofollow> http://winless.org/online-less-compiler




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




4. 使用新的CSS文件。将bootstrapped内容< div class ='tb'>< / div>




I wanted to use twitter bootstrap CSS only in a specific element in my web page.

I tried to do it like in code below. But after compiling this to a css file nothing was outputted. If I moved @import outside #my_div then I got all css definitions for twitter boostrap.

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

How can I namespace a less css file?

解决方案

I am not using less on the live site, nor am I manually doing the compiling so this is kind of a "simple" version. It's not as automated as the others but may apply to some users.

1. Edit bootstrap.css / bootstrap-responsive.css

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

2. Recompile with less or use an online less compiler - http://winless.org/online-less-compiler

3. Edit the now-compiled file and change body {} CSS declarations to tb {}.

4. Use the new CSS file.

5. Place your "bootstrapped" content inside a <div class='tb'></div>

这篇关于在命名空间中包装一个.cless定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！