SASS CSSを使用してネストされた子にパディングを動的に追加

Question

ディレクトリツリーを作成しようとしています。動的にネスティングの子を生成します。例えば、ここで私は、すべてのネストLIの子供のために、20ピクセルが追加されていること、それにSASS CSSを追加するにはどうすればよいHTML

<ul> 
    <li> 
     <div>test</div> 
     <span> 
      <ul> 
       <li> 
        <div>test1</div> 
        <span> 
         <ul> 
          <li> 
           <div>test 2</div> 
           <span> 
           </span> 
          </li> 
          <li> test2</li> 
         </ul> 
        </span> 
       </li> 
      </ul> 
     </span> 
    </li> 
</ul> 

にあります。第1レベルの20、第2の40など..私は各LIに直接パディングを追加しようとしていますが、基本的には左の要素全体を移動します。divを全幅に保ちたいので、フルそれに幅のある下の境界線を配置し、内容をパディングで移動します。

CodePen Link

この1つは私が欲しいものを行いますが、その動的ではありません。

ここでJSFiddleリンクを作成しました。 https://jsfiddle.net/h7pbmsh1/1/

Answer 1

それはあなたがチェーンになどchild combinator (>)を探しているように聞こえる：

ul > li > ul > li { 
    padding-left: 3em; 
} 

この方法は、セレクタは、初期Main<li>要素を対象としませんが、それは一つ一つを対象とします<li>エレメントは、これらのトップレベルの<li>エレメントの下にあります。hereです。

上記は「生の」CSS出力です。

ul { 
    > li { 
    > ul { 
     > li { 
     padding-left: 3em; 
     } 
    } 
    } 
} 

SASS固有のアプローチはを見ることができます：あなたは、具体的SASSでそれをしたい場合は、内部のセレクタの前に、新しいラインの開始時にそれを置くことによって、子コンビネータを利用することができますhere。

希望すると便利です。 :)