使用命名空间编译Bootstrap 3中的问题 [英] Compiling issue in Bootstrap 3 with namespace

问题描述

任何想法为什么当我编译Bootstrap 3使用Crunch / WinLESS时，某些风格破裂。我使用这个代码命名空间引导。

  .namespace-bs {
 @importless / bootstrap。减; 
} 
  

对于大多数样式，它的效果很好，但有一些， ：

  .btn-primary .namespace-bs .caret，.btn- success .namespace-bs .caret，.btn- warning .namespace-bs .caret，.btn-danger .namespace-bs .caret，.btn-info .namespace-bs .caret {border-top-color：#fff;} 
  
 
 
 
当我希望他们是这样：
  .namespace-bs .btn-primary .caret，.namespace-bs .btn-success .caret，.namespace-bs .btn-warning .caret，.namespace-bs .btn-danger .caret，.namespace- bs .btn-info .caret {border-top-color：#fff;} 
  
 
解决方案
 
 
您的问题详情
 
 
 
当& 是附加到嵌套选择器。所以Bootstrap代码部分有这样：
  .caret {
 .btn-default& {
 border-top-color：@ btn-default-color; 
} 
 .btn-primary& 
 .btn-success& 
 .btn-warning& 
 .btn-danger& $; b $ b .btn-info& {
 border-top-color：#fff; 
} 
} 
  
回想一下 & 替换为完整嵌套结构，因此当您按照原样命名空间时，您可以有效地使用：
  .namespace-bs {
 .caret {
 .btn-default& {
 border-top-color：@ btn-default-color; 
} 
 .btn-primary& 
 .btn-success& 
 .btn-warning& 
 .btn-danger& $; b $ b .btn-info& {
 border-top-color：#fff; 
} 
} 
} 
  
完整的嵌套结构& 替换时， .namespace .caret ，这就是为什么你看到的选择器看起来像 .btn-primary .namespace-bs .caret 等。
 
 
 
解决LESS 1.4 + 
 
 
 
以下应该可以工作：
 
 
 
将引导程序从其LESS代码编译为 bootstrap.css 文件。这将把所有LESS解析成正常引导css代码，并且& 将在预期和期望的地方运行。
 
 
 
 
然后在您的名称空间LESS文件中，执行以下操作：
 
 
 
 
 
 
  .namespace-bs {
 @import（less）css / bootstrap.css; 
} 
  
我们所做的是导入编译的 bootstrap。 css 文件（它没有更多的& 值，因为它是完全编译的），但是当我们导入它，我们通过将（较少）类型转换放在。所以现在，你的命名空间应该简单地附加到 bootstrap.css 文件中每个选择器的完整选择器字符串，并且你应该得到你想要的结果。 p> 
Any idea why there are certain styles breaking when I compile Bootstrap 3 using Crunch / WinLESS.  I'm using this code to namespace bootstrap.
.namespace-bs {
    @import "less/bootstrap.less";
}
For most styles it works great but there are a few that turn out like this:
.btn-primary .namespace-bs .caret,.btn-success .namespace-bs .caret,.btn-warning .namespace-bs .caret,.btn-danger .namespace-bs .caret,.btn-info .namespace-bs .caret{border-top-color:#fff;}
When I would expect them to be like this:
.namespace-bs .btn-primary .caret,.namespace-bs .btn-success .caret,.namespace-bs .btn-warning .caret,.namespace-bs .btn-danger .caret,.namespace-bs .btn-info .caret{border-top-color:#fff;}
Is there something wrong with my compiler or a bug in the LESS code?


Thanks
解决方案
Your Issue in Detail

As seven-phases-max described, there are issues with name spacing "when the & is appended to a nested selector." So the Bootstrap code in part has this:
.caret {
  .btn-default & {
    border-top-color: @btn-default-color;
  }
  .btn-primary &,
  .btn-success &,
  .btn-warning &,
  .btn-danger &,
  .btn-info & {
    border-top-color: #fff;
  }
}
Recall that every instance of & is replaced with the full nesting structure, so when you namespace it as you are, you effectively have this:
.namespace-bs {
  .caret {
    .btn-default & {
      border-top-color: @btn-default-color;
    }
    .btn-primary &,
    .btn-success &,
    .btn-warning &,
    .btn-danger &,
    .btn-info & {
      border-top-color: #fff;
    }
  }
}
And the full nested structure is .namespace .caret at the point of the & replacement, which is why you are seeing the selectors look like .btn-primary .namespace-bs .caret etc.

Work Around for LESS 1.4+

The following should work: 

Compile bootstrap from its LESS code as normal into a bootstrap.css file. This will resolve all LESS into the "normal" bootstrap css code, and the & will function as expected and desired wherever it is used.
Then in your name spacing LESS file, do this:


.namespace-bs {
    @import (less) "css/bootstrap.css";
}
What we are doing is importing the compiled bootstrap.css file (which has no more & values in it, as it is fully compiled), but as we import it, we are telling LESS to treat the CSS as LESS code by putting the (less) type casting in. So now, your name space should simply append itself to the full selector string of each selector in the bootstrap.css file, and you should end up with what you desire.

                        
这篇关于使用命名空间编译Bootstrap 3中的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！