使用SASS功能自动使嵌套元素的背景色 [英] Automate background color of nested elements with SASS functions

问题描述

我正在制作一个多级导航系统，希望每个级的背景色都变暗20％(因此，第一级= #fff，第二级= #ccc，第三级=#999，依此类推).GOT是一种使用SASS函数动态自动执行此过程的绝妙方法，但是我不太想知道如何设置该语句.谁能指出我正确的方向?

I’m making a multi-level navigation system and want each level’s background color to darken by 20% (so 1st level = #fff, 2nd = #ccc, 3rd = #999 and so on). There has GOT to be an awesome way to dynamically automate this process using SASS functions but I can’t quite wrap my head around how the statement would be setup. Can anyone point me in the right direction?

FIDDLE

<ul>
  <li>Level 1: Item 1 (#fff)
    <ul>
      <li>Level 2: Item 1 (#ccc)</li>
      <li>Level 2: Item 2 (#ccc)
        <ul>
          <li>Level 3: Item 1 (#999)</li>
          <li>Level 3: Item 2 (#999)</li>
          <li>Level 3: Item 3 (#999)</li>
        </ul>
      </li>
      <li>Level 2: Item 3 (#ccc)</li>
    </ul>
  </li>
  <li>Level 1: Item 2 (#fff)</li>
  <li>Level 1: Item 3 (#fff)</li>
</ul>

---

li
  background: darken(white, 20%)

推荐答案

如果您只是利用Alpha透明度，就可以节省很多工作.

You can save yourself a fair bit if work if you just take advantage of alpha transparency.

li li
  background: rgba(black, .2)

http://sassmeister.com/gist/d329c946068d3075ba72

P.S.这也有助于获得有效的标记.

P.S. it also helps to have valid markup.

这篇关于使用SASS功能自动使嵌套元素的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！