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

这不是为了缩短它，而是为了让它更容易维护。

<script type="text/javascript" src="js/slidein/modernizr.js"></script>
<script type="text/javascript" src="js/slidein/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/slidein/main.js"></script>

Answer 3

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

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

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

如何用SASS缩短这个CSS？

3 个答案: