css – 通过SASS循环嵌套选择器

<ul> // first level
  <li>
    <ul></ul> // second level
  </li>
  <li>
    <ul> // second level
      <li>
        <ul></ul> // third level
      </li>
    </ul>
  </li>
</ul>

ul {
 padding: 10px;
 ul {
  padding: 20px;
  ul {
    padding: 30px;
    ... through 10 * ul
  }
 }
}

@for $i from 1 through 10 {
    ul {
        padding-left: 100 - (10 * $i) + px;
    }
  }

对于3.4之前的Sass版本,您需要执行此操作的功能不是本机Sass的一部分(并且递归mixin在某些版本中不起作用).你需要名为nest()的Compass函数.

$sel: '';
@for $i from 1 through 10 {
    // remove !global flag if you're using Sass < 3.3
    $sel: if($i == 1,"ul",nest($sel,"ul")) !global;

    #{$sel} {
        padding-left: 10px * $i;
    }
}

Sass 3.4有一个名为SELEctor-nest()的函数的原生版本：

$sel: '';
@for $i from 1 through 10 {
    $sel: if($i == 1,SELEctor-nest($sel,"ul")) !global;

    #{$sel} {
        padding-left: 10px * $i;
    }
}

输出：

ul {
  padding-left: 10px;
}

ul ul {
  padding-left: 20px;
}

ul ul ul {
  padding-left: 30px;
}

ul ul ul ul {
  padding-left: 40px;
}

ul ul ul ul ul {
  padding-left: 50px;
}

ul ul ul ul ul ul {
  padding-left: 60px;
}

ul ul ul ul ul ul ul {
  padding-left: 70px;
}

ul ul ul ul ul ul ul ul {
  padding-left: 80px;
}

ul ul ul ul ul ul ul ul ul {
  padding-left: 90px;
}

ul ul ul ul ul ul ul ul ul ul {
  padding-left: 100px;
}

如果你想拼出最初的ul,那么你会这样做：

ul {
    // parent styles
    border: 1px solid;

    $sel: '';
    @for $i from 2 through 10 {
        $sel: if($i == 2,'ul','ul')); // note no !global flag

        #{$sel} {
            padding-left: 10px * $i;
        }
    }
}

请注意,您可以使用简单的字符串连接而不是这些函数中的任何一个,但它仅适用于您只嵌套单个选择器的情况.如果您有2个或更多选择器,这是绝对必要的：

$sel: '';
@for $i from 1 through 3 {
    $sel: if($i == 1,"article,section",section")) !global;

    #{$sel} {
      h1 {
        padding-left: 10px * $i;
      }
    }
}

输出：

article h1,section h1 {
  padding-left: 10px;
}

article article h1,article section h1,section article h1,section section h1 {
  padding-left: 20px;
}

article article article h1,article article section h1,article section article h1,article section section h1,section article article h1,section article section h1,section section article h1,section section section h1 {
  padding-left: 30px;
}