首页 > 开发 > CSS > 正文

sass中Mixins中each循环的问题

2017-09-12 09:39:34  来源: 网友分享
@mixin css3($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        #{$prefix}#{$property}: $value;    }}@mixin css3after($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        $property: #{$prefix}#{$value};    }}header{    @include css3after(display,box);}.border_radius {  @include css3(transition, 0.5s);}

为什么 .border_radius 的引用是成功的,但是 header的就是失败的??

.border_radius成功后是这样的:

   .border_radius {      -webkit-transition: 0.5s;      -moz-transition: 0.5s;      -ms-transition: 0.5s;      -o-transition: 0.5s;      transition: 0.5s;    }

解决方案

@mixin css3after($property, $value) {    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {        #{$property}: #{$prefix}#{$value};    }}

这样试试,属性名应该用这种形式