Question

是否可以少用正则表达式？如果没有，我可以通过另一种方式实现以下目标吗？

我想给每个Bootstrap行和列添加一个虚线边框。鉴于有这么多col-md-12，col-md-11，....我不想输出所有这些，所以我只想说：

.my-canvas {
    .row,
    .col-.*-.* {
         outline: 2px dashed #000;
    }
}

Answer 1

对于这个，您不需要使用Less和正则表达式。通过使用属性选择器，可以使用纯CSS本身，如下例所示。

[class^='col-'],
[class*=' col-'] {
  outline: 2px dotted red;
}
div {
  margin: 10px;
}

<div class='col-md-11'>Something</div>
<div class='col-md-12'>Something</div>
<div class='col-md-21'>Something</div>
<div class='column-md-11'>Something</div>
<div class='some-class col-md-99'>Something</div>

Answer 2

Less被编译成独立于其他文件的CSS，因此它实际上无法使用正则表达式搜索html。但是，您可以使用Less Loop自动构建Harry提到的所有CSS规则。我通常使用SCSS，其中循环使用'for'更明确，但使用递归Mixins可以在Less中使用。

Here's the 'getting started' on Loops from the LessCSS page.

可以在Less中使用正则表达式吗？

2 个答案: