After spending over two hours chasing my tail, I'm still struggling to create a cross-browser gradient @mixin.
My desired result is:
-moz-linear-gradient(left, #fff 0%, #000 100%);
Using the default arguments in:
@mixin gradient($type:linear, $gradient:(#fff 0%, #000 100%), $shape:vertical, $repeat:false){
background:nth(nth($gradient, 1), 1);
$background:null;
$vendors:null;
@if $shape == vertical {
$vendors: (
mozilla: (-moz-, top),
webkit: (-webkit-, top),
opera: (-o-, top),
standard: ("", to bottom)
);
}@else if $shape == horizontal {
$vendors: (
mozilla: (-moz-, left),
webkit: (-webkit-, right),
opera: (-o-, right),
standard: ("", to right)
);
}@else{
$vendors: (
mozilla: (-moz-, $shape),
webkit: (-webkit-, $shape),
opera: (-o-, $shape),
standard: ("", to $shape)
);
}
@if $repeat == true{
$background:repeating-+$type+-gradient;
}@else if $repeat == false {
$background:$type+-gradient;
}
@if $type == linear {
@each $vendor in $vendors {
background:[?????];
}
}@elseif $type == radial {
@each $vendor in $vendors {
background:[?????];
}
}
}
I'm in desperate need of assistance before I resort to smashing my laptop against my head!