Select Page

For example purposes, here is a LESS mixin that looks something like this:

.make-blue( @selector ) {
   @(selector) { background: blue; }
}

 

To call it, I originally did something like this:

.make-blue( 'div' );

 

That produced output like this:

'div' { background: blue; }

 

Clearly, that is not precisely what I wanted – those single-quotes around the selector cause a problem.  To remove those surrounding quotes, you must decorate the parameter like this:

.make-blue( ~'div' );

 

Using the tilde (~) is the escaping feature for LESS.  The new output CSS now looks like this:

div { background: blue; }