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

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

mercurial graft feature, can it copy? -