css3 - Mixins Gradient for IE8 -
i trying make less mixin graditent wotk in ie8, know can use gradient in ie8 this
filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#1e5799', endcolorstr='#7db9e8',gradienttype=0 ); /* ie6-9 */   this juwt example, need make custom mixin create ie8, css have
 background-image: linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);     background-image: -o-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);     background-image: -moz-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);     background-image: -webkit-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);     background-image: -ms-linear-gradient(bottom, rgba(0,0,0, 0) 50%, rgba(255,255,255, 0.08) 0%);   what need modified less mixins created
.gradient (@startcolor: #eee, @endcolor: white) {     background-color: @startcolor;     background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor));     background: -webkit-linear-gradient(top, @startcolor, @endcolor);     background: -moz-linear-gradient(top, @startcolor, @endcolor);     background: -ms-linear-gradient(top, @startcolor, @endcolor);     background: -o-linear-gradient(top, @startcolor, @endcolor); }   for support ie8 :)
filter: progid:dximagetransform.microsoft.gradient(startcolorstr='@startcolor', endcolorstr='@endcolor',gradienttype=0 ); /* ie6-9 */   but problem here '@startcolor'
in brackets, not recognize variable
the traditional less compiler not accept filter property , throw error. use less escaping problem well. need add following line in gradient , should work fine.
filter: ~”progid:dximagetransform.microsoft.gradient(startcolorstr='@{startcolor}, endcolorstr='@{endcolor})”;   this line appear in code.
Comments
Post a Comment