如何设置引导 col-lg-* 类的样式？答案

【问题标题】：How to style bootstrap col-lg-* classes?如何设置引导 col-lg-* 类的样式？
【发布时间】：2014-10-03 10:57:03
【问题描述】：

我是 Less 的初学者。我想用 col-lg-[anyNumber] 或 col-md-[anyNumber] 类在任何div 中写一个类似“Column-div”的字符串。

例如这样的代码：

.col-lg-*:before {
  content: "Column-div";
  color: #28a4c9;
}

如何用 Less 做到这一点？

【问题讨论】：

您是否正在寻找类似demo 的循环？单击 CSS 选项卡中的眼睛图标以查看编译后的 CSS 输出。
@Harry，谢谢哈利！这是我的答案
您可能还想看一下 this thread 中 7-phases-max 提供的 for 循环包装器 mixin。 LESS 本身没有for 语法，但这个包装器非常有用且易于使用:)（注意：我删除了前面的评论以减少噪音，请不要弄错）。

标签： css twitter-bootstrap-3 css-selectors less

【解决方案1】：

少用：

其中一个选项是基本上创建一个 Less 循环，如下面的代码示例所示。但是，问题在于数字是固定的，因此它会（a）静态生成与数字一样多的类（这意味着臃肿的代码）和（b）如果类具有更高的后缀值，则不会被覆盖。

.loop(@count) when (@count > 0){ // execute the function only when condition matches.
  .loop(@count - 1); // call the iteration again with a decremented count
  .col-lg-@{count}:before { // using selector interpolation to add the count number
    content: "Column-div";
    color: #28a4c9;
    }
}

.loop(100); // call the loop with the no. of iterations as the parameter

Codepen Demo

使用纯 CSS：

对于这种模式匹配，还有一个纯 CSS 替代方案。您可以根据需要使用CSS3 Attribute Selectors 中的任何一个。 sn-p 中提供了一些示例。

[class^='col-lg']:before { /* class name starts with col-lg */
  content: "Column-div";
  color: yellow;
}
[class$='col-lg']:before { /* class name ends with col-lg */
  content: "Column-div2";
  color: beige;
}
[class*='col-lg']:before { /* contains col-lg in class name */
  background: chocolate;
}

/* Just for demo */

div:before{
  display: block;
}

<div class='col-lg-1'></div>
<div class='col-lg-2'></div>
<div class='col-lg-3'></div>

<div class='a-col-lg'></div>
<div class='b-col-lg'></div>
<div class='c-col-lg'></div>

【讨论】：