1
我使用Ultimate CSS Gradient Generator形成放射状的梯度,并且它提供的萨斯包括,但是无法填写background-image mixin
如何为此CSS径向渐变创建Sass mixin?
的CSS
background: rgb(220,156,118);
background: -moz-radial-gradient(center, ellipse cover, rgba(220,156,118,1) 0%, rgba(220,156,118,1) 49%, rgba(214,101,90,1) 92%, rgba(214,101,90,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
background: radial-gradient(ellipse at center, rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc9c76', endColorstr='#d6655a',GradientType=1);
这里是萨斯mixin @includes
background-color: rgb(220,156,118);
@include filter-gradient(#dc9c76, #d6655a, horizontal);
@include background-image(radial-gradient(center, ellipse cover, rgba(220,156,118,1) 0%,rgba(220,156,118,1) 49%,rgba(214,101,90,1) 92%,rgba(214,101,90,1) 100%));
我能够创建过滤器梯度的mixin
@mixin filter-gradient($color1, $color2, $direction){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=$direction);}
但是还挺停留在创建混入对于径向渐变,因为颜色停止
@mixin background-image($gradient($position, $type, $rgba1, $rgba2, $rgba3, $rgba4){
background: rgb(220,156,118);
background: -moz-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(220,156,118,1)), color-stop(49%,rgba(220,156,118,1)), color-stop(92%,rgba(214,101,90,1)), color-stop(100%,rgba(214,101,90,1)));
background: -webkit-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
background: -o-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
background: -ms-$gradient(center, $type, $rgba1, $rgba2, $rgba3, $rgba4);
background: $gradient(ellipse at center, $rgba1, $rgba2, $rgba3, $rgba4);
};
你会怎么写那些?
有什么错误使用罗盘? http://compass-style.org/reference/compass/css3/images/ – cimmanon
每个项目使用多少个径向渐变? – sheriffderek
嗯,我想,我只是使用1 ...可能试图解决一个非问题嗯,只是让我感到奇怪,他们提供了一个SASS解决方案,但没有mixins –