如何设置bootstrap col-lg-*类的样式？

Question

我是Less的初学者.我想div用col-lg- [anyNumber]或col-md- [anyNumber]类写一个像"Column-div"这样的字符串.

比如像这样的代码:

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

我怎么能用Less做这件事？

Answer 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演示

使用纯CSS:

对于这种模式匹配,还有一个纯CSS替代品.您可以根据需要使用任何一个CSS3属性选择器.代码段中提供了一些示例.

[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>