我是 Less 的初学者。我想在任何 div
中写一个像“Column-div”这样的字符串使用 col-lg-[anyNumber] 或 col-md-[anyNumber] 类。
例如像这样的代码:
.col-lg-*:before {
content: "Column-div";
color: #28a4c9;
}
我怎样才能用 Less 做到这一点?
最佳答案
更少:
其中一个选项是基本上创建一个 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
使用纯 CSS:
对于这种模式匹配,还有一个纯 CSS 替代方案。您可以使用 CSS3 Attribute Selectors 中的任何一个根据您的需要。代码段中提供了一些示例。
[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>
关于css - 如何设置 bootstrap col-lg-* 类的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25229297/