如何用SASS缩短这个CSS？

Question

如何使用SASS缩短此CSS代码段？

ul a{
  padding-left: 20px;
}
ul ul a{
  padding-left: 30px;
}
ul ul ul a{
  padding-left: 40px;
}
ul ul ul ul a{
  padding-left: 50px;
}

Answer 1

只需更改$count的值：

$count: 4;
$pad: 10px;
$ul: ul;

@for $i from 1 through $count {
  #{$ul} a {
    padding-left: $pad + (10 * $i);
  } 
  $ul: append($ul, ul)
}

Answer 2

它不是要缩短它，而是要让它更容易维护。

=depth($level)
  padding-left: 20px + (10px * $level)

ul
  a
    +depth(0)
  ul
    a
      +depth(1)
    ul
      a
        +depth(2)
      ul a
        +depth(3)

Answer 3

只是为了它的乐趣，这里有一种替代的嵌套方式:(基于@mash的回答）

=depth($level)
  padding-left: 20px + (10px * $level)

a
  ul &
    +depth(0)
    ul &
      +depth(1)
      ul &
        +depth(2)
        ul &
          +depth(3)