CODEWITHSUNDEEP
csscss-selectorsless
Merl
Merl

Reputation: 131

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;
    }
}

Upvotes: 3

Views: 663

Answers (2)

Tobl
Tobl

Reputation: 671

Less is compiled into CSS independent of other files, so it can't actually search through your html with regular expressions. However, you can automate building all those CSS rules that Harry mentions by using a Less Loop. I normally use SCSS, where loops are a bit more explicit with 'for', but they're possible in Less by using recursive Mixins.

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

Upvotes: 0

Harry
Harry

Reputation: 89780

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>

Upvotes: 4

Related Questions