scss中循环的妙用

1 @each in 循环

使用一个变量： #{$变量名}

$colors: (
    p1: rgb(255, 113, 61),
    p2: lightblue,
    p3: lightseagreen
);
@each $key, $color in $colors {
    &.#{$key} {
         background-color: $color;
    }
}

2 @for… from… to 循环

@for $i from 1 to 4 {
    .paper:nth-child(#{$i}) {
        /**
        有顺序之分
        transform: translate() rotate() !== transform: rotate() translate()
        */
         transform: translate(-50%, -40%) rotate(#{$i}5deg);
     }
}
分别旋转15 25 35 45度