web-dev-qa-db-ja.com

lessでセレクターに変数名を使用

変数名を使用してセレクターを格納して使用する方法はありますか？

#master #leftcontent div,
#master #rightcontent div{
    background-color: #fff;    
}

#master #leftcontent a,
#master #rightcontent a{
    color:blue;    
}

#master #leftcontentを変数に格納して参照することは可能ですか？

less
24
user460025

はい、これは可能です

これはLESS1.3.1以降で機能します。文字列を変更することはできますが、これはそれを実行できる1つの方法の単なる例です。

[〜＃〜] less [〜＃〜]

@selector1: ~'#master';
@selector2: ~'@{selector1} #leftcontent';
@selector3: ~'@{selector1} #rightcontent';

@{selector2} div,
@{selector3} div { 
   background-color: #fff; 
}

@{selector2} a,
@{selector3} a { 
   color: blue; 
}

CSS出力は質問に示したとおりです。

41
ScottS