Как создать смесь Sass для этого радиального градиента CSS?

Question

Я использую Ultimate CSS Gradient Generator, чтобы создать радиальный градиент, и при условии, что Sass включает в себя, однако возникли проблемы с заполнением в background-image 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 filter-gradient($color1, $color2, $direction){ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=$direction);} 

Однако своего рода застрял на создании подмешать для градиента Radial из-за цвета ограничителей

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

Как бы вы написали те, в?

Answer 1

вы должны попробовать попробовать Compass, который представляет собой отличный набор полезных микшинов (например, градиент), применяющих лучшие практики для кросс-браузера.

radial-gradient($color-stops, $center-position, $image) 

Из-за ограничений в WebKit, радиальный градиент Mixin работает лучше всего, если вы используете пиксельных цвета останавливается.

Examples: 

// Defaults to a centered, 100px radius gradient 
+radial-gradient(color-stops(#c00, #00c)) 

// 100px radius gradient in the top left corner 
+radial-gradient(color-stops(#c00, #00c), top left) 

// Three colors, ending at 50px and passing thru #fff at 25px 
+radial-gradient(color-stops(#c00, #fff, #00c 50px)) 

// A background image on top of a 100px radius gradient; requires an image 
// with an alpha-layer. 
+radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png"))) 

Поддерживаемые браузеры:

• Chrome
• Safari
• Firefox 3.6 Opera