Merl Merl - 3 months ago 19
Less Question

Possible to use regular expressions in Less?

Is it possible to use regular expressions in less? If not is there another way I can achieve the following?

I want to give every Bootstrap row and column a dotted border. Given that theres so many

col-md-12
,
col-md-11
, .... I dont want to type out all of them so I just want to say:

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

Answer

You don't need to use Less with regular expressions for this one. It is possible to do with pure CSS itself by using attribute selectors like in the below example.

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

Comments