< 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%) ;
}
}
}