2016-08-10 4 views
3

lessで正規表現を使用できますか?そうでない場合、私は次のことを達成できる別の方法がありますか?Lessで正規表現を使用できますか?

すべてのブートストラップの行と列に点線の境界線を付ける必要があります。非常に多くのcol-md-12col-md-11をtheresのことを考えると、....私は、私が言いたいそれらのすべてを入力したくない:

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

答えて

3

あなたはこの1のために正規表現をあまり使用する必要はありません。 。下の例のような属性セレクタを使用することで、純粋な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>

0

それは実際に正規表現を使用してHTMLを検索することができないので、少ないが、他のファイルのCSSから独立にコンパイルされます。しかし、Less Loopを使ってHarryが言及しているCSSルールをすべて自動作成することができます。私は通常、SCSSを使用します。ここでは、ループは 'for'でもう少し明示的ですが、再帰的Mixinsを使用することでLessで可能です。

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

関連する問題