Less Mixin - Output Values Without Quotes

LESS mixin - Output values without quotes

Just escape the string using ~ like shown below. Doing this would make sure that the quotes are not printed in the output CSS.

Input Code:

transform: ~"@{type}(@{value})";

or

transform: e("@{type}(@{value})");

Mixin Call:

.transform(rotateY;360deg);

Output CSS:

transform: rotateY(360deg);

How to escape quotes in Less variable which stores a color name?

From the LESS "e" function reference:

e(@string); // escape string content

If you use the function e you'll get the correct result.

.mixin(@name, @color) {
    .text-@{name} {
        color: @color !important;
    }
    .label-@{name} {
        color: @color !important;
    }
}

.mixin(e('white'), white);

You can also create a variable and then use it for multiple purposes:

@whiteLiteral: e('white');
//mixin declaration code
.mixin(@whiteLiteral, white);

Not able to extend Less mixin

As mentioned in comments and discussed in the chat, Less currently does not support extending of mixins (there is a request and it might get addressed in v2.0.0 or later). (Note: To be more precise with wordings, extending of mixins which are not output in CSS is not supported.)

So, the best way forward would be to do the below:

Less:

.selected-dropdown-values { // just remove the braces
    background-color: #505050;
    color: #fff;
}

Just remove the braces from the .selected-dropdown-values rule. Ofcourse this would cause that rule also to be present in the CSS output but given that we are using extend, it would mean only one extra line in CSS output.

Output:

.selected-dropdown-values,
.selected-values,
.selected-values a {
    background-color: #505050;
    color: #fff;
}

less mixin name is evaluated to colour/color

This is a legacy feature of Less. For the time being, one of the below work-around solutions could be used to overcome this color name to hex code conversion.

.completeColour(~"Orange",1);

or

.completeColour(e("Orange"),1);

Both the options explicitly tell the compiler that the value being passed is a String and not a Color and hence Less compiler would not convert it to the corresponding hex code.

Sources:

1. Less GitHub - how to avoid color name be translated into color value?
2. Less GitHub - Compilation of named colors results in hex values being used incorrectly in interpolations

Update: Starting from version 2.0.0, this color name to hex code conversion would not happen if the color is mentioned explicitly as a name and has no other color based operations on it. Version 2.0.0 is currently in beta mode.

(Official Update: V2 Upgrade Guide | Original Source: More consistent named color variables).

How to format text with variable without quotes in SASS?

If need to remove quotes from a string, you can use the unquote function:

@mixin background_gradient($dir, $from, $to) {
    background: linear-gradient(unquote('to #{$dir}'), $from, $to);
}

Less mixin is not working for parameters with comma

Pass it like this, escaping it

.MultiStepGradient(~"135deg,#202f7c 0%, #7f3689 52%, #7f3689 100%")

you could change the mixin to take multiple values if you want to pass it the way you are doing it now

http://lesscss.org/functions/#string-functions-escape

Scroll down a little to see the e section

CSS escaping, replaced with ~"value" syntax.

It expects string as a parameter and return its content as is, but
without quotes. It can be used to output CSS value which is either not
valid CSS syntax, or uses proprietary syntax which Less doesn't
recognize.

LESS mixin for Calc values

You can use the CSS escape function like this:

@{property}: calc(e(@operation));

Pass style attribute to less mixin

Yes, you can pass property names to a mixin and assign values to it using property name interpolation in Less.

The mixin value should be referenced like a string within curly braces (@{style}). Also, the mixin call should be made from within a selector block because otherwise parameteric mixins would not produce any output when compiled.

.makeRed (@style) {
    @{style}: red; // using the parameter
}

#id{ // selector block
    .makeRed(border-color); // mixin call with no quotes
}

Note: This method will work only from Less v1.6.0 and above.

LESS CSS pass string to mixin

I'm not quite certain what you are seeking to have as output, but this:

.mixin(@paramName) {
  background: ~"...@{paramName}";
}

.mixin("Pdcbs/sjdhc+jdjhdf");

Produces this for me:

background: ...Pdcbs/sjdhc+jdjhdf;

---

Related Topics