简而言之,我要做的是在Bootstrap.CSS上应用自定义ID选择器,这样我就不会破坏网站上的其他CSS.所以这 :
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
成为这个:
#my-id-selector .col-xs-1, #my-id-selector .col-sm-1, #my-id-selector .col-md-1, #my-id-selector .col-lg-1, #my-id-selector .col-xs-2, #my-id-selector .col-sm-2, #my-id-selector .col-md-2, #my-id-selector .col-lg-2, #my-id-selector .col-xs-3, #my-id-selector .col-sm-3, #my-id-selector .col-md-3, #my-id-selector .col-lg-3, #my-id-selector .col-xs-4, #my-id-selector .col-sm-4, #my-id-selector .col-md-4, #my-id-selector .col-lg-4, #my-id-selector .col-xs-5, #my-id-selector .col-sm-5, #my-id-selector .col-md-5, #my-id-selector .col-lg-5, #my-id-selector .col-xs-6, #my-id-selector .col-sm-6, #my-id-selector .col-md-6, #my-id-selector .col-lg-6, #my-id-selector .col-xs-7, #my-id-selector .col-sm-7, #my-id-selector .col-md-7, #my-id-selector .col-lg-7, #my-id-selector .col-xs-8, #my-id-selector .col-sm-8, #my-id-selector .col-md-8, #my-id-selector .col-lg-8, #my-id-selector .col-xs-9, #my-id-selector .col-sm-9, #my-id-selector .col-md-9, #my-id-selector .col-lg-9, #my-id-selector .col-xs-10, #my-id-selector .col-sm-10, #my-id-selector .col-md-10, #my-id-selector .col-lg-10, #my-id-selector .col-xs-11, #my-id-selector .col-sm-11, #my-id-selector .col-md-11, #my-id-selector .col-lg-11, #my-id-selector .col-xs-12, #my-id-selector .col-sm-12, #my-id-selector .col-md-12, #my-id-selector .col-lg-12 { position:relative; min-height:1px; padding-left:15px; padding-right:15px }
所以,想象一下这种情况,我认为这很常见:
您使用Bootstrap(在我们的示例中为3.1.1)来构建需要在另一个应用程序中运行的Web /移动应用程序窗口小部件.小部件将拥有自己的CSS,不得破坏主机应用程序的CSS.
小部件将存在于具有特定ID的漂亮小DIV中.
所以我们要做的是修改编译Bootstrap的LESS文件以引用该特定ID.我已经接近这样做,但我一直在遇到问题.我当前的问题是Bootstrap LESS代码使用mixins来创建特定于GRID的CSS(在GRID.LESS文件中).当我尝试将我的选择器添加到GRID.LESS文件时,它的行为不像我期望/希望的那样:它不是将我的ID选择器应用于GRID.LESS文件中的所有类选择器,而是仅适用于选择器列表中的第一个选择器.
(作为我理解的Bootstrap的一个小背景(希望所以即使你从未使用过Bootstrap,那些有LESS经验的人也可以回答我的问题):源LESS文件都是通过BOOTSTRAP.LESS中的@import语句引用的.我使用Grunt根据Bootstrap的网站文档编译Bootstrap.CSS和JS文件(因此存在一个Grunt.JSON文件,用于编排LESS编译和其他一些东西).BOOTSTRAP.LESS使用@import访问VARIABLES.LESS ,MIXINS.LESS和GRID.LESS,这些都是这部剧的参与者).
希望我能解释一下我的意思:
原始代码(Bootstrap 3.1.1)的GRID.LESS文件包含:
// Columns // // Common styles for small and large grid columns .make-grid-columns();
该代码调用MIXIN.LESS文件中的mixin,该文件动态创建一些列类选择器:
.make-grid-columns() { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } } .col(1); // kickstart it }
我不完全理解上面的代码,但我认为它遍历从Bootstrap附带的VARIABLES.LESS文件接收的参数,并创建类似于CSS的类选择器列表,如下所示:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
我做的修改是在调用周围添加我的自定义ID选择器范围,如下所示:
// Columns // // Common styles for small and large grid columns #my-id-selector .make-grid-columns();
问题是,这不会将我的选择器应用于Bootstrap在MIXIN.LESS代码中创建的所有动态生成的列,而只是将我的ID选择器添加到列表中的第一个选择器,如下所示:
#my-id-selector .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
我觉得奇怪的是,如果我只是在没有mixin的情况下编写一个LESS文件来将我的ID选择器的范围应用于选择器列表,那么我得到的是我期望的输出.例如,这......
#my-id-selector { .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } }
...产生预期的和期望的输出:
#my-id-selector .col-xs-1,#my-id-selector .col-sm-1,#my-id-selector .col-md-1,#my-id-selector .col-lg-1,#my-id-selector .col-xs-2,#my-id-selector .col-sm-2,#my-id-selector .col-md-2,#my-id-selector .col-lg-2,#my-id-selector .col-xs-3,#my-id-selector .col-sm-3,#my-id-selector .col-md-3,#my-id-selector .col-lg-3,#my-id-selector .col-xs-4,#my-id-selector .col-sm-4,#my-id-selector .col-md-4,#my-id-selector .col-lg-4,#my-id-selector .col-xs-5,#my-id-selector .col-sm-5,#my-id-selector .col-md-5,#my-id-selector .col-lg-5,#my-id-selector .col-xs-6,#my-id-selector .col-sm-6,#my-id-selector .col-md-6,#my-id-selector .col-lg-6,#my-id-selector .col-xs-7,#my-id-selector .col-sm-7,#my-id-selector .col-md-7,#my-id-selector .col-lg-7,#my-id-selector .col-xs-8,#my-id-selector .col-sm-8,#my-id-selector .col-md-8,#my-id-selector .col-lg-8,#my-id-selector .col-xs-9,#my-id-selector .col-sm-9,#my-id-selector .col-md-9,#my-id-selector .col-lg-9,#my-id-selector .col-xs-10,#my-id-selector .col-sm-10,#my-id-selector .col-md-10,#my-id-selector .col-lg-10,#my-id-selector .col-xs-11,#my-id-selector .col-sm-11,#my-id-selector .col-md-11,#my-id-selector .col-lg-11,#my-id-selector .col-xs-12,#my-id-selector .col-sm-12,#my-id-selector .col-md-12,#my-id-selector .col-lg-12 { position:relative; min-height:1px; padding-left:15px; padding-right:15px }
您可以看到我的#my-id-selector已应用于列表中的所有选择器,我可以检测到的唯一区别是mixin调用.所以看起来mixin在应用我的选择器ID之后进行评估.
如果是这种情况,是否有某种方法可以确保首先评估mixin,然后应用我的范围?
有没有人试图自定义Bootstrap,以便它是ID选择器特定的?
更新:解决方法是修改MIXINS.LESS'.make-grid-columns()mixin以传入我的ID选择器.这是代码:
.make-grid-columns(@id_prefix: "") { // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~"@{id_prefix} .col-xs-@{index}, @{id_prefix} .col-sm-@{index}, @{id_prefix} .col-md-@{index}, @{id_prefix} .col-lg-@{index}"; .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo @item: ~"@{id_prefix} .col-xs-@{index}, @{id_prefix} .col-sm-@{index}, @{id_prefix} .col-md-@{index}, @{id_prefix} .col-lg-@{index}"; .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); } } .col(1); // kickstart it }
真正重要的是为了"修复"所有Bootstrap CSS所以我需要做的定制量,以便它使用我的ID选择器.所以我仍在寻找更好的解决方案......
目前唯一可行的解决方案是将已编译的 Bootstrap CSS导入Less名称空间,即:
#my-id-selector { @import (less) "bootstrap.css"; }
将Bootstrap较少的源导入命名空间将不会按预期工作,不仅因为列类而且还有一百个原因(更多详细信息请参见#2052).