Less和Bootstrap：如何使用span3（或spanX [任何数字]）类作为mixin？ [英] Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

问题描述

是否可以在mixin中添加 span3 类，以避免将其放在HTML的每个元素中？
类似的东西：

  .myclass {
 .span3; 
 //其他规则... 
} 
  
 
 
  
 
 
 
我很抱歉我忘记指定一个重要的细节： span3 是Bootstrap的标准类。 
我没有在Bootstrap框架的任何文件中找到它的定义。 
解决方案
 
新答案（需要LESS 1.4.0）
 
 
 
您实际的愿望是被称为  extends  在LESS和SASS术语中。例如，您想要一个HTML元素（只是一个示例）... 
 < div class =myclass> < / div> 
  
 ...完全  $ c> span3 来自bootstrap的类，但实际上没有在HTML中添加该类。这可以在LESS 1.4.0中使用：extend（）来完成，但仍然不容易，主要是因为引导的动态类生成不会被：extend（）。
 
 
 
这里是一个例子。假设此初始LESS代码（ 不 动态生成 .span3 类作为bootstrap）：
  .span3 {
 width：150px; 
} 
 
 .someClass .span3 {
 font-size：12px; 
} 
 
 .someOtherClass.span3 {
 background：blue; 
} 
  
您在1.4.0中添加此LESS代码：
  .myclass {
&：extend（.span3）; 
} 
  
生成此CSS：
  .span3，
 .myclass {
 width：150px; 
} 
 .someClass .span3 {
 font-size：12px; 
} 
 .someOtherClass.span3 {
 background：blue; 
} 
  
 注意 / em>自动扩展 .span3 的其他实例。这与比SASS 不同，但它只意味着您需要在扩展中有点更明确。 
 
 
 
要完全扩展，只需在关键字中添加 all   extend（）（这是从我的原始代码更新，因为我不知道 all 选项） p> 
 
 
  .myclass {
&：extend（.span3 all）; 
} 
  
这产生了：
  .span3，
 .myclass {
 width：150px; 
} 
 .someClass .span3，
 .someClass .myclass {
 font-size：12px; 
} 
 .someOtherClass.span3，
 .someOtherClass.myclass {
 background：blue; 
} 
  
这会使您的 .myclass   完全等效 （在我的示例中）。然而，在你的情况下，这意味着你需要重新定义任何动态类的bootstrap是非动态的。像这样：
  .span3 {
 .span（3）; 
} 
  
这是：extend（.span3） 将找到一个硬编码类来扩展。这需要对任何动态使用 .span @ {index} 添加 .span3  。 
 
 
 
原始答案
 
 
 
 此回答假设您想要 mixin 属性从一个动态生成的类（这是我认为你的问题是）。 
 
 
 
好吧，我相信我发现了你的问题。首先，引导程序定义 .spanX 在 mixins.less 文件中的一系列类，所以你显然需要确保你包括在你的引导加载。 
 
 
 $ b  
 
 b 
主要的问题是引导程序如何通过循环中的动态类名生成那些。这是定义 .spanX 系列的循环：
  .spanX （@index）when（@index> 0）{
 .span @ {index} {.span（@index）; } 
 .spanX（@index  -  1）; 
} 
 .spanX（0）{} 
  
目前，因为类名本身是动态生成的，所以它不能用作混合名。我不知道这是一个错误还是仅仅是LESS的限制，但我知道，在目前的写作时间，任何动态生成的类名称不作为一个混合名称。因此， .span3 可能在CSS代码中作为一个类放在HTML中，但是它不能直接用于访问mixin目的。 
 
 
 
 修复 
 
 
 
然而，由于他们如何组织代码，你仍然可以得到你需要的，因为你可以在循环代码中看到，他们使用一个真正的mixin本身来定义 .spanX 类的代码。因此，您应该能够执行此操作：
  .myclass {
 .span（3） 
 //其他规则... 
} 
  
  .span（3）代码是循环用于填充 .span3 类，因此为您的类调用它会给与 .span3 具有相同的代码。具体来说，bootstrap在 mixins.less 中定义了该mixin：
  .span（@columns）{
 width：（@fluidGridColumnWidth * @columns）+（@fluidGridGutterWidth *（@columns  -  1））; 
 * width：（@fluidGridColumnWidth * @columns）+（@fluidGridGutterWidth *（@columns  -  1）） - （.5 / @gridRowWidth * 100 * 1％）; 
} 
  
所以你会得到 width  .myclass 中的 .span3 的属性
 
Is it possibile to add span3 class in a mixin to avoid putting it in every element in my HTML?
Something like:
.myclass {
    .span3;
    // other rules...
}
EDIT

I apologize I forgot to specify an important detail: span3 is a standard class of Bootstrap. 
I didn't find its definition in any file of the Bootstrap framework. 
解决方案
New Answer (requires LESS 1.4.0)

What you actually desire is something known as extending in LESS and SASS terminology. For example, you want an HTML element (just an example)...
<div class="myclass"></div>
...to fully behave as if it had a span3 class from bootstrap added to it, but without actually adding that class in the HTML. This can be done in LESS 1.4.0 using :extend(), but still not easily, mainly because of the dynamic class generation of bootstrap will not be picked up by :extend().

Here is an example. Assume this initial LESS code (not dynamically generated .span3 classes as bootstrap does):
.span3 {
  width: 150px;
}

.someClass .span3 {
  font-size: 12px;
}

.someOtherClass.span3 {
  background: blue;
}
You add this LESS code in 1.4.0:
.myclass {
  &:extend(.span3);
}
Which produces this CSS:
.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}
NOTE how it did not automatically extend the other instances of .span3. This is different than SASS, but it only means you need to be a bit more explicit in extending. This has the advantage of avoiding excessive CSS code bloat.

To fully extend, simply add the all keyword in the extend() (this is updated from my original code, as I was unaware of the all option):
.myclass {
  &:extend(.span3 all);
}
Which produces this:
.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}
That makes your .myclass fully equivalent (in my example) to the .span3 class. What this means in your case, however, is that you need to redefine any dynamic class generations of bootstrap to be non-dynamic. Something like this:
.span3 {
  .span(3);
}
This is so the :extend(.span3) will find a hard coded class to extend to. This would need to be done for any selector string that dynamically uses .span@{index} to add the .span3. 

Original Answer

This answer assumed you desired to mixin properties from a dynamically generated class (that is what I thought your issue was).

Okay, I believe I discovered your issue. First of all, bootstrap defines the .spanX series of classes in the mixins.less file, so you obviously need to be sure you are including that in your bootstrap load. However, I assume it is a given that you have those included already.

Main Problem

The main issue is how bootstrap is generating those now, through a dynamic class name in a loop. This is the loop that defines the .spanX series:
.spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
 }
.spanX (0) {}
Currently, because the class name itself is being dynamically generated, it cannot be used as a mixin name. I don't know if this is a bug or merely a limitation of LESS, but I do know that at present time of writing, any dynamically generated class name does not function as a mixin name. Therefore, .span3 may be in the CSS code to put as a class in your HTML, but it is not directly available to access for mixin purposes. 

The Fix

However, because of how they have structured the code, you can still get what you need, because as you can see above in the loop code, they use a true mixin itself to define the code for the .spanX classes. Therefore, you should be able to do this:
.myclass {
    .span(3);
    // other rules...
}
The .span(3) code is what the loop is using to populate the .span3 class, so calling it for your classes will give the same code that .span3 has. Specifically bootstrap has this defined in mixins.less for that mixin:
.span (@columns) {
  width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
  *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}
So you will get the width properties for the .span3 in your .myclass.

                        
这篇关于Less和Bootstrap：如何使用span3（或spanX [任何数字]）类作为mixin？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！