Question

简单地说，我尝试做的是在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文件都是通过@import语句引用的在BOOTSTRAP.LESS文件中。我使用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＆＃39; .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
}

真正重要的是我必须做的定制量才能修复＆＃34;所有的Bootstrap CSS所以它使用我的ID选择器。所以我仍然在寻找更好的解决方案......

Answer 1

目前唯一可行的解决方案是将编译的 Bootstrap CSS导入Less名称空间，即：

#my-id-selector {
    @import (less) "bootstrap.css";
}

将Bootstrap较少的源导入命名空间不会像预期的那样工作，不仅因为列类而且还有一百个原因（更多细节见#2052）。

修改Bootstrap LESS文件以使用ID选择器

1 个答案: