我是 Less 的初学者。我想在任何地方写一个像“Column-div”这样的字符串div with col-lg-[任意数字] or col-md-[任意数字] class.
例如像这样的代码：
.col-lg-*:before {
content: "Column-div";
color: #28a4c9;
}
我怎样才能用更少的东西做到这一点？
更少：
其中一种选择是基本上创建一个 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 演示 http://codepen.io/hari_shanx/pen/isyKj
使用纯CSS：
对于这种模式匹配，还有一个纯 CSS 替代方案。您可以使用其中任何一项CSS3 属性选择器 https://drafts.csswg.org/selectors-3/#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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
