Value escaping with the ~"value" syntax

The ~"value" syntax for value escaping can be used to assign a value to a property that is not recognized by Less. Less only accepts a valid CSS syntax for property values.

Getting ready

For this recipe, you will have to create a gradient.less file and an index.html file, which load the Less file and less.js compiler with the following code in the head section:

<link rel="stylesheet/less" type="text/css" href="gradient.less">
<script src="less.js" type="text/javascript"></script>

How to do it…

1. Write the following Less code into your gradient.less file:

   .gradient {
     background-image:linear-gradient(to bottom, red, yellow); 
     background-repeat: repeat-x;
     filter: ~"-progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffff0000', EndColorStr='#ffffff00')";
   }

2. Add some header elements to your index.html file, as follows:

   <header...