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

我只想在我的网页中的特定元素中使用twitter引导CSS。在命名空间中包装一个.less css定义

我试着像下面的代码那样做。但编译后，这是一个CSS文件没有输出。如果我将@import移到#my_div之外，那么我会获得twitter boostrap的所有css定义。

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

如何命名空间less css文件？

来源

2011-11-27 Martins Balodis

LESS文档有关于namespaces的章节。

所以，你可以在一个单独的文件定义您的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; 
}

来源

2011-11-27 19:51:38 FelipeAls

问题出在'@ import'上。在名称空间中使用它时不起作用。 –

@MartinsBalodis lib的代码应该是一个LESS文件（只需在CSS lib的开头添加'#ns {.anything（）{''和'}'，并且主文件也必须是LESS文件，导入应该在'#my_div {}'之外的开始部分进行，没有进一步的指令，第一个文件中的任何内容都不会被输出，所以你可以在这个选择器之前的任何地方导入它，然后'#ns> .twitter;'指令将最终将您的代码添加到您想要的位置 – FelipeAls

只能导入twitter lib，我不能编辑这些文件，它们被用作git子模块[Twitter模块main .less file]（https://github.com） /twitter/bootstrap/blob/master/lib/bootstrap.less） –

这是怎么了我已经做了。这发生在从git下载或克隆的引导文件夹的根目录中。

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

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

## ./style.less 

@import "less/namespace.less"; 

.namespace { 
    #ns > .twitter; 
}

那么少跑style.less>的style.css

来源

2012-05-17 12:32:07 Randy

less/namespace.less文件中有什么？ – FLX

我试过这个，但我不能使用.twitter（） – FLX

导入的mixins这不起作用，你最终得到的选择器如：button.namespace .close {...} – Caqu

我不活网站上使用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>

来源

2012-06-10 18:26:36 Nucleon

这将如何防止在html中的冲突，例如：

当另一个库的类定义为“大按钮”时？前缀是防止两端命名空间冲突的唯一方法。 – TaylorMac

我以前曾尝试使用源代码中的所有.less文件并使用winless重新编译。但是，最终的CSS文件中缺少某些内容。我可以按照你的程序纠正它 - 谢谢！ –

这对我有用。我按照getbootstrap.com/getting-started上的“安装Grunt”下的说明进行操作。一旦这个工作，我遵循这个答案，用'grunt dist'重新编译。这样，我维护CSS供应商前缀。 –

以下内容是我怎么做到的，基于上述majgis的github上叉：

引导-ns.less：

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

namespace.less：

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

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

来源

2013-02-12 03:43:51 muzzamo

如果你有控制编译参数只是设置strictImports为false，并工作，你打算一切都应该没问题。考虑看看less-strictimports或在这issue。

来源

2014-08-09 09:35:23

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

回答

相关问题