LESS - 親要素に依存して異なるスタイルを持つクラス

以下のようないくつかのLESSスタイルがあります。各親要素の下にクラス名を複製しなくても、私が達成しようとしていることをよりうまく処理する手法が、LESSにありますか？LESS - 親要素に依存して異なるスタイルを持つクラス

span { 

    .zero { 
     color: #fff; 
    } 
} 

div { 

    .zero { 
     color: #389c40; 
    } 
}

2017-04-20 noclist

を行うことができ、あなたがやっているものを達成する方法はありません。また、もしあれば、私はあなたがそれをタイプすることによって時間を節約することを真剣に疑う。私が考慮する1つのことは、あなたの色を再利用可能な変数として設定することです。 – markthewizard1234

jsを使用して入力 – noclist

をありがとうが、純粋なCSS/lessソリューションを探している場合は、1つではありません。 – TricksfortheWeb

さて、あなたは常に

.zero { 
    span & { color: #fff; } 
    div & { color: #389c40; } 
}

2017-04-20 16:23:51

これ。これは私が探していたものです。セレクタが親を参照した後に '＆'を認識しませんでした – noclist

CSS変数を使用してみてください：

:root{ 
    --zColor: #fff; 
} 
.zero{ 
    color: var(--zColor); 
} 
div{ 
    --zColor: #389c40; 
}

2017-04-20 16:03:14 Muran

良いテクニック、ありがとう – noclist

@noclistよろしくお願いします。あなたに役立つことを願っています。 – Muran

最新のアップデートでEdgeでサポートされるようになりました。 –

答えて