CODEWITHSUNDEEP
cssless
Hubro
Hubro

Reputation: 59408

How can I pass mixin arguments along literally in LESS CSS?

This is my mixin:

.gradient (...) {
    background-image: -webkit-linear-gradient(@arguments);
    background-image: -moz-linear-gradient(@arguments);
    background-image: -ms-linear-gradient(@arguments);
    background-image: -o-linear-gradient(@arguments);
    background-image: linear-gradient(@arguments);
}

And I'm trying to use it like this:

.gradient(top, #333333 0%, #282828 100%);

The problem is that LESS is stripping away all the commas, so the output looks like this:

background-image: linear-gradient(top #333333 0% #272727 100%);

Is it possible to get LESS to pass along the arguments literally? Alternatively, how should I solve this problem?

Upvotes: 0

Views: 620

Answers (1)

Simone Conti
Simone Conti

Reputation: 314

To achive what you are looking for I think you have to pass the @arguments as a literal string using one of these syntax:

  1. ~"top, #333333 0%, #282828 100%"

  2. e("top, #333333 0%, #282828 100%")

Syntax ~"value" and e("value") are almost equivalent.

Then you should call your .gradient( @arguments ) mixin like this:

.gradient( e("top, #333333 0%, #282828 100%") );

Upvotes: 1

Related Questions