2017-02-03 9 views
0

私はcss crushを長年使用していましたが、最近scssが来ました。そこで、トップレベルの親要素の追加クラスに基づいて、ネストされた要素に特定のプロパティを追加することができました。このような何かを行くだろうネストされたSassツリーの追加クラスを持つトップレベルセレクタの参照

<div class="someDivClass"> 
    <ul class="someULclass"> 
     <li>Text lorem ipsum</li> 
     <li>Text ipsum lorem 
      <ul class="someULclass2"> 
       <li>Text lorem ipsum</li> 
       <li>Text ipsum lorem</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

のCss ....私が持っている場合今

.someDivClass { 
    ul.someClass { 
     fewUlporpertis: values; 
     li { 
      fewLIporpertis: values; 
      ul.someULclass2 { 
       fewUlporpertis: values; 
       li { 
        fewLIporpertis: values; 
       } 
      } 
     } 
    } 
} 

...

<div class="someDivClass additionalClass"> 
    ..... 
</div> 

私はこれを行うことができます...

.someDivClass { 
    ul.someClass { 
     fewUlporpertis: values; 
     li { 
      fewLIporpertis: values; 
      ul.someULclass2 { 
       fewUlporpertis: values; 
       li { 
        fewLIporpertis: values; 
        .additionalClass& { 
         color: red; 
        } 
       } 
      } 
     } 
    } 
} 

これは私にこの出力を与えるだろう...

.additionalClass.someDivClass ul.someClass li ul.someULclass2 li {color: red;} 

SASSで同じことをする方法はありますか?申し訳ありませんが、これが文書化されていれば、私が見つけることができるのは、トップレベルのものではなく、直接の親を参照するためのものです。

またはUltra質問を簡素化する....

これが動作しないのはなぜ...

.topParent& {color: red;} 

..?

答えて

0

直接の親を対象に回避するために、あなたが戻ってドキュメントのルートに横断する(サス3.3で導入された)@at-rootディレクティブを使用する必要がありますでしょう出力

.someDivClass { 
    ul.someULclass { 
     li { 
      ul.someULclass2 { 
       li { 
        @at-root .additionalClass#{&} { 
         color: red; 
        } 
       } 
      } 
     } 
    } 
} 

へ:

.additionalClass.someDivClass ul.someULclass li ul.someULclass2 li { color: red; } 

See Demo

関連する問題