Sass中的循环

原创

程序员 NEO

发布于 2023-09-29 07:34:42

2360

SASS 比 LESS 牛逼的地方就在于 SASS 中直接支持循环语句，而 LESS 中需要通过 混合 + 条件判断 自己实现，SASS 中支持两种循环，分别是 for 循环和 while 循环，紧接着我们先修改 HTML 的结构代码然后在来看 sass 中的循环代码内容如下：

<!DOCTYPE html>
<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;
    }
  }
}