Sass中通过循环去设置样式

sass中可以设置变量，并且也可以通过设置循环的方法去设置样式
1、首先来说一下sass中的for方法

<template>
  <div>
    <div class="colored-div1">a</div>
    <div class="colored-div2">b</div>
    <div class="colored-div3">c</div>
    <div class="colored-div4">d</div>
    <div class="colored-div5">e</div>
  </div>
</template>

<script>
import VirtualList from './components/VirtualList'
export default {
  components: {
    VirtualList
  },

  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    itemSize() {
      return 15
    },
    getData() {
      for (let i = 0; i < 8000; i++) {
        this.data.push(i)
      }
    }
  }
}
</script>

<style lang="scss">
@mixin color-divs($count, $baseName, $startcolor) {
  @for $i from 0 through $count {
    $background-color: darken($startcolor, $i * $i);
    .colored-div#{$i} {
      background: $background-color;
      height: 100px;
      width: 200px;
      float: left;
      margin-right: 5px;
    }
  }
}
@include color-divs(5, 'a', #ffd8b1);
</style>

在上面的例子中，我们先谢了几个div，然后在样式里定义了一个混入mixin，并且是带参数的，用include引入了混入样式，关于mixin和include可以具体参考sass官网的内容
通过for去循环，遍历渲染颜色
最后页面显示的结果如下：

2、用sass中的each去遍历

<template>
  <div class="demo">
    <div class="class-demo1">
    </div>
    <div class="class-demo2">
    </div>
    <div class="class-demo3">
    </div>
    <div class="class-demo4">
    </div>
    <div class="class-demo5">
    </div>
    <div class="class-demo6">
    </div>
  </div>
</template>

<script>
import VirtualList from './components/VirtualList'
export default {
  components: {
    VirtualList
  },

  data() {
    return {
      data: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    itemSize() {
      return 15
    },
    getData() {
      for (let i = 0; i < 8000; i++) {
        this.data.push(i)
      }
    }
  }
}
</script>

<style lang="scss">
$class-new-list: #4a3 #45b #4c8 #49b #463 #45a7;
$class-new: red green orange blue purple pink grey;
.demo {
  @each $color in $class-new-list {
    $i: index($class-new-list, $color);
    .class-demo#{$i} {
      background-color: $color;
      width: 30px;
      height: 30px;
    }
  }
}
</style>

它的效果和用for是差不多的