5

我们的 .less 文件中有一个基本的斑马条纹图案，用于.list-striped.

我们甚至让它适用于嵌套列表，也就是它反转选择器，否则您最终会得到父列表项，而子项的第一个列表项具有相同的样式而不是相反的样式。

这工作正常，但是，我们想要 N 级深度，所以我们真的不想只是将样式嵌套到我们认为用户会嵌套的任何东西之上，我们希望有一些东西可以整理一下并使其适用于 N 级而不是 2 级列表？

我在想我需要一些nth-child(even)/nth-child(odd)关于嵌套的魔法.list-item？

  • C1
    • C2
      • C1
      • C2
    • C1
      • C2
    • C2
  • C2
  • C1
  • C2

html基本上是

<div class="list-striped">
    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>

    <div class="list-item">
        <a class="title">List title</a>

        <!-- Start N-Level Nesting -->
        <div class="list-striped">
            <div class="list-item">
                <a class="title">List title</a>
                <!-- We could duplicate the n-level nesting item here as 
                     much as we want -->
            </div>
        </div>
        <!-- End N-level Nesting -->

    </div>
</div>

和CSS

div {
  .list-striped {

    .list-item:nth-child(odd) {

      a {
        background-color: @tableBackgroundAccent;
      }

      .list-striped {

        .list-item:nth-child(odd) a {
          background-color: @white;
        }

        .list-item:nth-child(even) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

    .list-item:nth-child(even) {

      a {
        background-color: @white;
      }

      .list-striped {

        .list-item:nth-child(even) a {
          background-color: @white;
        }

        .list-item:nth-child(odd) a {
          background-color: @tableBackgroundAccent;
        }
      }

    }

  }

  &.list-hover {
    .list-item:hover a {
      background-color: @tableBackgroundHover;
    }
  }
}
4

1 回答 1

0

在 sass 中不是一个完全完成的解决方案，但这是一个 css 解决方案，并且在评论中是针对您的问题的一个正在进行的 sass 解决方案。

http://codepen.io/sp90/pen/eNOZZz

HTML：

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li> 
            <li>foo</li>
            <li>foo</li>            
        </ul>
    </li>
    <li>ho
        <ul>
            <li>foo</li>
            <li>foo</li>    
            <li>foo</li>
            <li>foo</li>        
        </ul>
    </li>
    <li>ho</li>
</ul>

萨斯：

ul {
  > li:nth-child(even) {
    background: red;
    ul li:nth-child(even) {
      background: red;
    }
    ul li:nth-child(odd) {
      background: blue;
    }
  }
  > li:nth-child(odd) {
    background: blue;
    ul li:nth-child(odd) {
      background: red;
    }
    ul li:nth-child(even) {
      background: blue;
    }
  }

}
于 2015-04-17T12:46:07.250 回答