StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POcrossbrowser opacity mixin for .less
text
Body
copied!<p>I am trying to use Javascript in LESS to be compiled in phpstorm..</p> <p>I am trying to create a function based off of a cross-browser implementation of opacity found at this site : <a href="http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/" rel="noreferrer">link</a></p> <p>Specifically, I am trying to create a LESS function to recreate this piece of code:</p> <pre><code>.crossbrowseropacity { /* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0); /* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } </code></pre> <p>This is what I have in LESS to achieve it:</p> <pre><code>.crossbrowser(@color,@alpha){ @myred:red(@color); @mygreen:green(@color); @myblue:blue(@color); @ievalue:Math.floor(@alpha * 255).toString(16); background-color: @color; background-color: rgba(@myred,@mygreen,@myblue,@alpha); /* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue)"; } </code></pre> <p>It will not compile right..could someone help me with this?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload