SASS循环

<template><div><button class="btn type-1">默认按钮</button><button class="type-2">主要按钮</button><button class="type-3">成功按钮</button><button class="type-4">信息按钮</button><button class="type-5">警告按钮</button><button class="type-6">危险按钮</button></div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
@import "./sass_style.scss";// $btnColors: #000000, #f4b9d1, #7b5194, #262d3b, #1b4fc0, #ffdab9;
// @mixin type-divs($startcolor) {
//   @for $i from 1 through length($startcolor) {
//     .type-#{$i} {
//       $color: nth($startcolor, $i);
//       background: $color;
//       color: #fff;
//       width: 350px;
//       height: 85px;
//       &:hover {
//         background: lighten($color, 10%);
//       }
//       &:active {
//         background: darken($color, 10%);
//       }
//       &:disabled {
//         background: lighten($color, 20%);
//         color: lighten($color, 40%);
//       }
//     }
//   }
// }// @include type-divs($btnColors);
</style>

@charset "utf-8";
$btnColors: #000000, #f4b9d1, #7b5194, #262d3b, #1b4fc0, #ffdab9;@for $i from 1 through length($btnColors) {.type-#{$i}{$color: nth($btnColors, $i);background: $color;color: #fff;width: 350px;height: 85px;&:hover {background: lighten($color, 10%);}&:active {background: darken($color, 10%);}&:disabled {background: lighten($color, 20%);color: lighten($color, 40%);}}}