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 框架的任何文件中都没有找到它的定义.

解决方案

New Answer(需要 LESS 1.4.0)

您真正想要的是extending 在 LESS 和 SASS 术语中.比如你想要一个 HTML 元素(只是一个例子)...

...to fully 表现得好像它添加了一个来自 bootstrap 的 span3 类，但实际上并未在 HTML 中添加该类.这可以在 LESS 1.4.0 中使用 :extend() 完成，但仍然不容易，主要是因为 :extend()<不会拾取引导程序的动态类生成/代码>.

这是一个例子.假设这个初始 LESS 代码(不是动态生成的 .span3 类作为引导程序):

.span3 {宽度:150px；}.someClass .span3 {字体大小:12px；}.someOtherClass.span3 {背景:蓝色；}

您在 1.4.0 中添加此 LESS 代码:

.myclass {&:extend(.span3);}

产生这个 CSS:

.span3,.我的课 {宽度:150px；}.someClass .span3 {字体大小:12px；}.someOtherClass.span3 {背景:蓝色；}

注意它是如何没有自动扩展.span3的其他实例的.这与 与 SASS 不同，但这仅意味着您需要在扩展中更明确一点.这样做的好处是可以避免过度的 CSS 代码膨胀.

要完全扩展，只需在 extend() 中添加 all 关键字(这是从我的原始代码更新的，因为我不知道 all 选项):

.myclass {&:extend(.span3 all);}

产生这个:

.span3,.我的课 {宽度:150px；}.someClass .span3,.someClass .myclass {字体大小:12px；}.someOtherClass.span3,.someOtherClass.myclass {背景:蓝色；}

这使您的 .myclass 完全等效(在我的示例中)与 .span3 类.但是，在您的情况下，这意味着您需要将引导程序的任何动态类代重新定义为非动态的.像这样:

.span3 {.span(3);}

这样 :extend(.span3) 会找到一个硬编码的类来扩展.对于任何动态使用 .span@{index} 来添加 .span3 的选择器字符串，都需要这样做.

原答案

这个答案假设您希望从动态生成的类中混合属性(这就是我认为您的问题所在).

好的，我相信我发现了您的问题.首先，bootstrap 定义了 .spanX 系列mixins.less 文件 中的类，因此您显然需要确保将其包含在引导加载中.但是，我认为您已经包含这些内容是理所当然的.

主要问题

主要问题是引导程序现在如何通过循环中的动态类名生成这些.这是定义 .spanX 系列的循环:

.spanX (@index) 当 (@index > 0) {.span@{index} { .span(@index);}.spanX(@index - 1);}.spanX (0) {}

目前，因为类名本身是动态生成的，所以不能用作mixin名.我不知道这是一个错误还是仅仅是 LESS 的一个限制，但我知道在撰写本文时，任何动态生成的类名都不能用作混合名称.因此，.span3 可以在 CSS 代码中作为类放入 HTML 中，但不能直接用于 mixin 访问.

修复

然而，由于他们如何构建代码，你仍然可以获得你需要的东西，因为正如你在上面的循环代码中看到的那样，他们使用一个真正的 mixin 本身来定义 .spanX 的代码 类.因此，您应该能够这样做:

.myclass {.span(3);//其他规则...}

.span(3) 代码是循环用来填充 .span3 类的代码，因此为您的类调用它会给出与 .span3 有.特别是引导程序在 mixins.less 中为那个 mixin 定义了这个:

.span (@columns) {宽度:(@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));*width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5/@gridRowWidth * 100 * 1%);}

因此，您将在 .myclass 中获得 .span3 的 width 属性.

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屋！