修改Bootstrap LESS文件以使用ID选择器 [英] Modify Bootstrap LESS files to use an ID selector

问题描述

简单来说，我想做的是在Bootstrap.CSS之上应用自定义ID选择器，以便我不会打破网站上的其他CSS。因此：

  .col-xs-1，.col-sm-1，.col-md-1，.col -gs-2，.col-sm-2，.col-md-2，.col-1g-2，.col-xs-3，.col-sm- md-3，.col-lg-3，.col-xs-4，.col-sm-4，.col-md-4，.col-lg-4，.col-xs-5， -5，.col-md-5，.col-1g-5，.col-xs-6，.col-sm-6，.col-md-6，.col-1g- 7，.col-sm-7，.col-md-7，.col-1g-7，.col-xs-8，.col-sm-8，.col-md-8， ，.col-xs-9，.col-sm-9，.col-md-9，.col-lg-9，.col-xs-10，.col-sm-10， .col-lg-10，.col-xs-11，.col-sm-11，.col-md-11，.col-lg-11，.col-xs-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- selector .col-md-5，＃my-id-selector .col-lg-5，＃my-id-selector .col-xs-6，＃my- id-selector .col-md-6，＃my-id-selector .col-lg-6，＃my-id-selector .col-xs-7，＃my-id-selector .col-sm- 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。

小部件将生活在一个漂亮的小DIV与特定ID。

因此，我们要做的是修改编译Bootstrap的LESS文件以引用该特定ID。我接近这样做，但我一直遇到问题。我当前的问题是，Bootstrap LESS代码使用mixins创建GRID特定的CSS（在GRID.LESS文件中）。当我尝试添加我的选择器到GRID.LESS文件，它的行为不像我所期望/希望：而不是应用我的ID选择器到GRID.LESS文件中的所有类选择器，它只适用于

（作为我理解的Bootstrap一点背景（希望那些有LESS经验的人能回答我的问题，即使你从来没有使用Bootstrap）：源LESS文件都通过@import语句在BOOTSTRAP.LESS文件中引用我使用Grunt编译Bootstrap.CSS和JS文件每个Bootstrap的网站文档（因此Grunt.JSON文件存在编排LESS编译和一堆其他东西）。BOOTSTRAP.LESS使用@import访问VARIABLES.LESS，MIXINS.LESS和GRID.LESS，这是这个戏剧中的所有玩家）。

希望我可以解释一下我的意思：

原始代码（Bootstrap 3.1.1）的GRID.LESS文件包含：

  //列
 // 
 //小和大网格列的常见样式
 .make- grid-columns（）; 
 

该代码调用MIXIN.LESS文件中的mixin，动态创建一些列类选择器：

  .make-grid-columns（）{
 //所有大小的网格列的通用样式，宽度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; =<不是拼写错误
 @item：〜.col-xs  -  @ {index}，.col-sm  -  @ {index}，.col-md  -  @ {index}，.col-lg- @ {指数}; 
 .col（（@ index + 1），〜@ {list}，@ {item}）; 
} 
 .col（@index，@list）when（@index> @ grid-columns）{// terminal 
 @ {list} {
 position：relative; 
 //防止列在空时折叠
 min-height：1px; 
 //通过填充填充内部填充
 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- col-md-2，.col-lg-2，.col-xs-3，.col-sm-3，.col-md-3，.col-lg-3，.col-xs-4， -sm-4，.col-md-4，.col-lg-4，.col-xs-5，.col-sm-5，.col-md-5，.col-1g- xs-6，.col-sm-6，.col-md-6，.col-lg-6，.col-xs-7，.col-sm-7，.col-md-7， -7，.col-xs-8，.col-sm-8，.col-md-8，.col-lg-8，.col-xs-9，.col-sm-9， 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-1g-12 
 {
位置：相对; 
 min-height：1px; 
 padding-left：15px; 
 padding-right：15px; 
} 
  

我所做的修改是在调用时添加我的自定义ID选择器作用域，如下：

  //列
 // 
 //小和大网格列的常见样式
＃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， 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-1g-6，.col-xs-7，.col-sm-7，.col-md-7， .col-xs-8，.col-sm-8，.col-md-8，.col-lg-8，.col-xs-9，.col-sm-9，.col-md- col-lg-9，.col-xs-10，.col-sm-10，.col-md-10，.col-1g-10，.col-xs-11，.col-sm-11， -md-11，.col-lg-11，.col-xs-12，.col-sm-12，.col-md-12，.col-lg-12 
 {
位置：相对; 
 min-height：1px; 
 padding-left：15px; 
 padding-right：15px; 
} 
  

我发现奇怪的是，如果我只写一个LESS文件没有mixin要将我的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， 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-1g-5，.col-xs-6， .col-md-6，.col-1g-6，.col-xs-7，.col-sm-7，.col-md-7，.col-1g-7， col-sm-8，.col-md-8，.col-1g-8，.col-xs-9，.col-sm-9，.col-md-9，.col-1g- -xs-10，.col-sm-10，.col-md-10，.col-lg-10，.col-xs-11，.col-sm-11，.col-md-11， 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-选择器.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 
} 
  

-id选择器应用于列表中的所有选择器，并且我可以检测的唯一差别是mixin调用。因此，在我应用选择器ID之后，mixin将会进行评估。

如果是这样，是否有一些方法可以确保首先评估mixin，然后应用我的范围？

有没有人试图自定义Bootstrap，以便它是ID选择器特定的？

更新：一个解决方法是修改MIXINS.LESS的.make-grid-columns（）mixin传入我的ID选择器。这是代码：

  .make-grid-columns（@id_prefix：）{
 // Common所有尺寸的网格列，宽度的样式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; =<不是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; 
 //防止列在空时折叠
 min-height：1px; 
 //通过填充填充内部填充
 padding-left：（@ grid-gutter-width / 2）; 
 padding-right：（@ grid-gutter-width / 2）; 
} 
} 
 .col（1）; // kickstart it 
} 
  

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

解决方案

目前唯一可能的解决方案是导入 compile Bootstrap CSS into a Less namespace ie：

 ＃my-id-selector {
 @ import（less）bootstrap.css; 
} 
  

导入Bootstrap更少的源到命名空间将无法正常工作，的列类，但也有一百个原因（有关详细信息，请参阅＃2052 ）。

Briefly, what I'm trying to do is apply a custom ID selector on top of Bootstrap.CSS so that I don't break other CSS on a website. So this :

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

becomes this:

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

So, imagine this scenario, I think it's pretty common:

You use Bootstrap (in our case, 3.1.1) to build a web/mobile app widget that needs to run inside another application. The widget will have its own CSS that must not break the host application's CSS.

The widget will live in a nice little DIV with a specific ID.

So what we're trying to do is modify the LESS files that compile Bootstrap to reference that specific ID. I'm getting close to doing this, but I keep running into issues. The current issue I have is that the Bootstrap LESS code uses mixins to create GRID-specific CSS (in the GRID.LESS file). When I try to add my selector to the GRID.LESS file, it doesn't behave like I'd expect/hope: Instead of applying my ID selector to all the class selectors in the GRID.LESS file, it only applies to the first selector in a list of selectors.

(As a little background on Bootstrap as I understand it (hopefully so those of you with LESS experience can answer my question even if you've never used Bootstrap): the source LESS files are all referenced via @import statements in the BOOTSTRAP.LESS file. I use Grunt to compile the Bootstrap.CSS and JS files per Bootstrap's website documentation (so a Grunt.JSON file exists that orchestrates the LESS compiling and a bunch of other stuff). BOOTSTRAP.LESS uses @import to access VARIABLES.LESS, MIXINS.LESS, and GRID.LESS, which are all players in this drama).

Hopefully I can explain what I mean:

Original Code (Bootstrap 3.1.1)'s GRID.LESS file contains:

// Columns
//
// Common styles for small and large grid columns
.make-grid-columns();

That code calls a mixin in the MIXIN.LESS file that dynamically creates some column class selectors:

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

I don't fully understand the code above, but I think it loops through the parameters it receives from the VARIABLES.LESS file that comes with Bootstrap, and creates the list of class selectors into CSS that looks like this:

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

The modification I made was to add my custom ID selector scope around the call, like below:

// Columns
//
// Common styles for small and large grid columns
#my-id-selector .make-grid-columns();

The problem is that this doesn't apply my selector across all the dynamically generated columns that Bootstrap creates in the MIXIN.LESS code, and instead only adds my ID selector to the first selector in the list, like this:

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

What I find odd is that if I just write a LESS file without the mixin to apply my ID selector's scope to a list of selectors, I get the output that I'm expecting. For example, this...

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

...produces the expected and much desired output:

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

You can see that my #my-id-selector was applied to all selectors in the list, and the only difference I can detect is a mixin call. So it would seem that the mixin evaluates after my selector ID is applied.

If that's the case, is there some way to ensure that the mixin is evaluated first, then apply my scope?

Has anyone tried to customize Bootstrap so that it is ID selector specific?

Update: A work around was to modify the MIXINS.LESS' .make-grid-columns() mixin to pass in my ID selector. This is the code:

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

What's really gross about that is the amount of customization that I'll have to do in order to "fix" all of the Bootstrap CSS so it uses my ID selector. So I'm still looking for a better solution...

解决方案

For the moment the only possible solution is to import compiled Bootstrap CSS into a Less namespace i.e.:

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

Importing Bootstrap less sources into a namespace won't work as expected not only because of column classes but also for a hundred and one reason (see #2052 for more details).

这篇关于修改Bootstrap LESS文件以使用ID选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！