问题描述
Bootstrap使用一些LESS混合程序来生成 classes（and several other classes）;
.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
}
我可以看到用于创建循环，我可以理解在;
.loop（@counter）when（@counter> 0）{
.loop（（@ counter -1））; // next iteration
width：（10px * @counter）; //每次迭代的代码
}
div {
.loop（5）; //启动循环
}
但我似乎不知道引导程序使用的更复杂的嵌套守护表达式正在工作。
目的是为了更好地评估上面的bootstrap代码。的 .make-grid-columns（） mixin是生成一个长列表的选择器，它们都共享相同的属性。
此列表不能是代码中的硬编码，因为列数（ @ grid-columns ）可能会有所不同。
您已经在问题自己中解释了Less中循环的基础。
要理解mixins，你必须理解Less，使用相同的混合名称多次。
每个'matching'mixins将被编译成CSS代码。
Mixin guard when（）允许您设置匹配的条件。当防护不匹配的mixin不编译。
除了mixins，你还可以使用模式匹配，比你可以匹配的值如下：
.mixin1 a，@ width）{}
.mixin1（b，@ width）{}
.mixin（a，20px）; 调用只匹配第一个mixin。基于arity（参数个数）的partern匹配将
也可以工作。注意， .col（@index）when（@index = 1）不需要警卫（）。
.col（@index）调用只有一个参数，因此 .col（1）; 仅匹配基于arity匹配的mixin。
.col（@index） mixin调用 .col（@index，@list） （s）。 .col（@index）when（@index = 1） mixin只会在第一次迭代时调用。有两个mixin而不是一个的原因是Less不支持if / else。选择器列表不能以逗号开头或结尾，因此选择器列表中的第一个或最后一个项目应与其他选项卡不同。
或者，您可以使用mixin与一个额外的参数：
.mixin（@iterator; @item：〜; @seperator：〜） when（@iterator< 5）{
@list：〜@ {item} @ {seperator} @ {iterator};
.mixin（（@ iterator + 1）; @list;，）;
}
.mixin（@iterator; @list; @seperator）when（@iterator = 5）{
.selector {
@ {list}
}
}
.mixin（1）;
@seperator将为空（〜）和所有其他调用的逗号（，）。
注意，具有默认参数的mixin也匹配没有默认值设置值的调用：
So .call（1）; code> .call（@a; @b：4; @c：5）{} mixin。
如评论〜@ {list}中所述，@ {item}生成选择器列表
最后一次迭代 .col（@index，@list）when（@index =< @ grid-columns） mixin时最后的调用，因此匹配结构中的（@index> @ grid-columns） col（（@ grid-columns + 1）....）列 .col（@index，@list） 。
@ {list} {} 使用选择器插值设置选择器列表及其属性。 p>
当然，您还应该阅读以生成选择器列表。
最后，你应该知道Bootstrap需要这么长的选择器列表，因为它避免了（部分）属性选择器。您还可以使用以下CSS / Less代码替换选择器列表：
[class ^ =col-] ，[class * =col-]
{
position：relative;
//防止列在空时折叠
min-height：1px;
//通过填充填充内部填充
padding-left：（@ grid-gutter-width / 2）;
padding-right：（@ grid-gutter-width / 2）;
}
避免属性选择器的原因是某些浏览器计算速度慢。如可在，您可以抛弃此参数。我个人认为，未使用的代码是比在大多数Bootstrap项目中使用属性选择器更重要的性能问题。
Bootstrap uses some LESS mixins to generate it's column classes (and several other classes);
.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 can see that LESS mixin guards are being used to create loops, and I can understand the code examples that are given in the LESS documentation;
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
But I can't seem to grok exactly how the more complex nested guard expressions that bootstrap uses are working. Could somebody comment the above bootstrap code in a bit more detail to give me an indication of what is going on?
The purpose of the .make-grid-columns() mixin is to generate a long list of selectors which all share the same properties.This list can not be hard code in the code because of the number of columns (@grid-columns) may vary.
You already illustrated the basics of a loop in Less in the question yourself.
To understand the mixins you will have to understand Less allows you the use the same mixin name many times.Every 'matching' mixins will be compiled into the CSS code.Mixin guards when () enable you to set a condition for the match. When the guard not match the mixin is not compiled.Beside mixins guards you can also use pattern matching, than you can match on value as follows:
.mixin1(a,@width){}
.mixin1(b,@width){}
The .mixin(a,20px); call match only the first mixin. Partern matching based on arity (the number of arguments) will also works. Notice that .col(@index) when (@index = 1) does not need a guard (see also).the .col(@index) call has only one argument, so the .col(1); only matches that mixin based on arity matching. The .col(@index) mixin calls the .col(@index, @list) mixin(s). The .col(@index) when (@index = 1) mixin will be only called for the first iteration. The reason for having two mixins in stead of one is that Less don't support if / else. The list of selectors can not start or end with a comma and so the first or last item in the list of selectors should differ from the others.
Alternatively you can use a mixin with an additional argument:
.mixin(@iterator; @item:~""; @seperator:~"") when (@iterator < 5){
@list: ~"@{item} @{seperator} @{iterator}";
.mixin((@iterator + 1); @list; ",");
}
.mixin(@iterator; @list; @seperator) when (@iterator = 5){
.selector{
@{list}: value;
}
}
.mixin(1);
The @seperator will be empty (~"") for the first call and a comma (",") for all other calls.Notice that a mixin with default parameters also match calls which not having set values for the defaults:So .call(1); matches the .call(@a; @b:4; @c:5){} mixin.
As already mentioned in the comments ~"@{list}, @{item}" generates the selector list via string concatenation.
The last iteration of .col(@index, @list) when (@index =< @grid-columns) calls col((@grid-columns + 1)....) mixin when @index=@grid-columns and so matches the last .col(@index, @list) when (@index > @grid-columns) mixin in the structure.
@{list} { } use selector interpolation to set the list of selectors and his properties.
Of course you should also read the excellent blog post of @seven-phases-max about this structure to generate a list of selectors.
Finally you should know that Bootstrap needs such a long list of selectors because of it avoid (partial) attribute selectors. In stead of the selector list you can also use the following CSS / Less code:
[class^="col-"], [class*=" col-"]
{
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);
}
The reason to avoid attribute selectors is that some browsers compute them slow. As can be seen at http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/, you can discuse this argument. Personally i think that unused code is a more important performance issue than the use of attribute selectors in most Bootstrap projects.
这篇关于LESS循环用于在twitter中生成列类 - 它们如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！