• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @for

    @for循环规则写成@for<variable>from<expression>to<expression>{...},或者,@for<variable>from<expression>through<expression>{...}。从一个数字(第一个表达式的结果)向上或向下计数到另一个数字(第二个表达式的结果),并为中间的每个数字计算一个块。沿途的每个数字都分配给,给定的变量名。如果使用to,则不包括最终数字;如果使用through,则包括在内。

    scss 语句css 语句
    $base-color: #036;
    
    @for $i from 1 through 3 {
      ul:nth-child(3n + #{$i}) {
        background-color: lighten($base-color, $i * 5%);
      }
    }
    
    ul:nth-child(3n + 1) {
      background-color: #004080;
    }
    
    ul:nth-child(3n + 2) {
      background-color: #004d99;
    }
    
    ul:nth-child(3n + 3) {
      background-color: #0059b3;
    }
    

    上篇:@each

    下篇:@while