関数または変数からセレクタをLESSに指定する方法はありますか？

Question

私は、指定されたセレクタのn番目のインスタンスとそれに続くすべての兄弟を指定する必要がある状況があります。だから私は、この持っている：

td:nth-child(n + 2) 
{ 
    width: 125px; 
} 

をしかし、私は別のセレクタと異なるオフセットで、このの多くを行う、とnth-child(n + offset)を繰り返すことは面倒で、コードの意図をあいまいにしています。

私はこのような何かを好むだろう：

.self-and-siblings(@selector; @offset) 
{ 
    ~'@{selector}:nth-child(n + @{offset})'; 
} 

をし、このようにそれを呼び出す：

.self-and-siblings('td', 2) 
{ 
    width: 125px; 
} 

しかし、これはコンパイルされません。私は必要なものを達成することは可能ですか？

Answer 1

true値を返す関数はありません。また、mixinは、セレクタブロック内でのみコンテンツを出力することができます（それ自体のセレクタまたは親セレ​​クタのいずれか）。あなたの場合、文字列の印刷だけがありますが、セレクタブロック内に存在するプロパティ（または）には割り当てられません。

あなたのケースのために、あなたは以下のような非常に単純なミックスインを書いて、それを使用することができます。

.nth-child-mixin(@offset, @props){ 
    &:nth-child(n + @{offset}){ 
    @props(); 
    } 
} 
td{ 
    .nth-child-mixin(3, { 
    color: red; 
    }); 
} 
td{ 
    .nth-child-mixin(5, { 
    color: blue; 
    }); 
} 

上記nth-child-mixinがoffsetを取り、入力として割り当てる必要がありますプロパティ。プロパティはdetached rulesetで、これは次にn番目の子セレクタブロック内から呼び出されます。次のようにコンパイルされたCSSの出力はなります：あなたはそれをもnの乗数を渡すことができるよう

td:nth-child(n + 3) { 
    color: red; 
} 
td:nth-child(n + 5) { 
    color: blue; 
} 

---

をより包括的なミックスインは以下になります。

.nth-child-mixin(@multiplier, @offset, @props){ 
    &:nth-child(@{multiplier}n + @{offset}){ 
    @props(); 
    } 
} 
td{ 
    .nth-child-mixin(2, 5, { 
    color: blue; 
    }); 
} 

この場合、コンパイル済みのCSSは次のようになります。

td:nth-child(2n + 5) { 
    color: blue; 
} 

---

私は切り離さルールセットを使用して感じるあなただけの出力にセレクタをミックスインをしたい場合は、それをより明確にするが、 mixinの定義を次のようにすることができます。唯一の欠点は、同じネスト内に複数のそのようなブロックが必要な場合に、スコープの問題が発生することがあることです。

例えば

.nth-child-mixin(@multiplier, @offset){ 
    @sel: ~":nth-child(@{multiplier}n + @{offset})"; 
} 
td{ 
    .nth-child-mixin(1, 3); 
    &@{sel}{ 
    color: red; 
    } 
} 
td{ 
    .nth-child-mixin(2, 5); 
    &@{sel}{ 
    color: blue; 
    } 
} 

あなたはそれが原因スコープに期待される出力を生成しないネスト同じtd以内に以下のような2番目の子のセレクタを書きたい場合は、遅延ロードなど

td{ 
    .nth-child-mixin(1, 3); 
    &@{sel}{ 
    color: red; 
    } 
    .nth-child-mixin(3, 5); 
    &@{sel}{ 
    color: red; 
    } 
} 

スコープの問題を解決するために、以下のサンプルのような無名のセレクタボックスを使用することになります（これらのハックはひどいです）。

td{ 
    & { 
    .nth-child-mixin(1, 3); 
    &@{sel}{ 
     color: red; 
    } 
    } 
    &{ 
    .nth-child-mixin(3, 5); 
    &@{sel}{ 
     color: red; 
    } 
    } 
}