SASS 比 LESS 牛逼的地方就在于 SASS 中直接支持循环语句，而 LESS 中需要通过 混合 + 条件判断 自己实现，SASS 中支持两种循环，分别是 for 循环和 while 循环，紧接着我们先修改 HTML 的结构代码然后在来看 sass 中的循环代码内容如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
for 循环
- @for $i from 起始整数 through 结束整数{}
ul {
li {
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: #fff;
background: red;
@for $i from 5 through 8 {
&:nth-child(#{$i}) {
background: deepskyblue;
}
}
}
}
- @for $i from 起始整数 to 结束整数{}
ul {
li {
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: #fff;
background: red;
@for $i from 5 to 8 {
&:nth-child(#{$i}) {
background: deepskyblue;
}
}
}
}
- 两者的区别
through 包头包尾，to 包头不包尾
while 循环
- @while(条件语句){}
ul {
li {
width: 100%;
height: 50px;
border: 1px solid #000;
font-size: 20px;
color: #fff;
background: red;
$i: 5;
@while ($i <= 8) {
&:nth-child(#{$i}) {
background: deepskyblue;
}
$i: $i+1;
}
}
}
