您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Less and Bootstrap:如何使用span3(或spanX [任何数字])类作为mixin?

Less and Bootstrap:如何使用span3(或spanX [任何数字])类作为mixin?

您真正想要的是在LESS和SASS术语中_扩展的_ 东西。例如,您需要一个HTML元素(仅作为示例)…

<div class="myclass"></div>

......以 充分 行为,如果它有一个span3添加到它引导类,但实际上不添加该类的HTML。这可以在LESS 1.4.0中使用来完成:extend(),但仍然不容易,主要是因为动态类引导的生成不会被拾取:extend()

这是一个例子。假定此初始LESS代码.span3引导程序那样动态生成的类):

.span3 {
  width: 150px;
}

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

.someOtherClass.span3 {
  background: blue;
}

您在1.4.0中添加以下代码

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

产生此CSS的代码

.span3,
.myclass {
  width: 150px;
}
.someClass .span3 {
  font-size: 12px;
}
.someOtherClass.span3 {
  background: blue;
}

没有 自动扩展的其他实例.span3。这与SASS不同,但这仅意味着您需要在扩展方面更加明确。这样的好处是避免了过多的CSS代码膨胀。

要完全扩展,只需在中添加all关键字extend()(由于我不知道该all选项,因此它是从我的原始代码更新的):

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

产生此结果:

.span3,
.myclass {
  width: 150px;
}
.someClass .span3,
.someClass .myclass {
  font-size: 12px;
}
.someOtherClass.span3,
.someOtherClass.myclass {
  background: blue;
}

这使您.myclass.span3该类(在我的示例中)。但是,对于您的情况,这意味着您需要重新定义引导程序的所有动态类,使其成为非动态的。像这样:

.span3 {
  .span(3);
}

这样便:extend(.span3)可以找到要扩展的硬编码类。对于任何用于动态.span@{index}添加的选择器字符串,都需要这样做.span3

好的,我相信我发现了您的问题。首先,bootstrap定义了文件中的.spanX一系列类mixins.less,因此显然您需要确保将其包含在bootstrap负载中。但是,我想假设您已经包含了这些内容

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

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

当前, 由于类名称本身是动态生成 ,因此不能用作混合名称。我不知道这是Bug还是LESS的局限性,但我确实知道,在撰写本文时,任何动态生成的类名称都不能用作混合名称。因此,.span3可能在CSS代码中将其作为类放入HTML中,但出于混合目的而不能直接访问。

但是,由于他们如何构造代码,您仍然可以获得所需的东西,因为如您在循环代码中的上面所看到的那样,它们使用真正的mixin本身来定义.spanX类的代码。因此,您应该能够执行以下操作:

.myclass {
    .span(3);
    // other rules...
}

.span(3)代码是循环用来填充.span3类的代码,因此为您的类调用代码将提供与之相同的代码.span3。具体来说,引导程序为此mixins.less混合定义了以下定义:

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

所以,你会得到width属性.span3在你的.myclass

其他 2022/1/1 18:18:36 有442人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶