SASSを使用した選択によって区別するスタイル

Question

私はi-styleという名前のグローバルCSSクラスを持っています。私はセレクタに依存してそのスタイルを変更したい。私はそれがクラスと&.セレクターを使用して行うことができることを知っています。しかし、私はセレクターだけを与えることでそれを達成したいです。例えば

i-style{ 
border:solid 1px black; 
&div{ 
    border-color:red; 
} 
} 

<span class="i-style"></span> 
<div class="i-style"></div> 

その場合divは、赤色の境界線を有するべきです。

Answer 1

を助けている場合、私は、このヘルプに多分あなたがあなたの質問を理解していれば、この答えを受け入れる：

SASS

.i-style{ 
    border:solid 1px black; 
    @at-root div#{&}{ 
    border-color:red; 
} 
} 

OUTPUT

.i-style { 
    border: solid 1px black; 
} 
div.i-style { 
    border-color: red; 
} 

Answer 2

@Carlos、これを試してください。私は、これはあなたの条件

$selectorVar:'null' !default; 
.i-style{ 
    border:solid 1px black; 

    // build selector string 
    $selectorVar: div+& !global; 
    //$selectorVar: div+&, span+& !global; - for multiple selectors 
} 

#{$selectorVar} { 
border-color:red; 
} 

これは、生成出力

のような解決を願ってい

.i-style { 
    border: solid 1px black; 
} 

div.i-style { 
    border-color: red; 
} 

注：は一般的に、私はグローバルな名前空間を汚染しません！それは