javascript - How to escape quotes in Less variable which stores a color name? - Stack Overflow

admin管理员组

文章数量:1353641

I am working on a HTML/CSS project. I want to create classes for labels and texts based on the color. For example

text-red{
    color: red;
}

label-white{
    color: white;
}

To do this I am trying to create a mixin which accepts a name and a color as argument and creates this class. I wrote the following mixin :

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

.mixin('white', white);

This gives me the following output

.text-'white'{ /* notice the quotes*/
    color: #ffffff
}

If I run this mixin as .mixin(white, white); I get

.text-#ffffff{
    color: #ffffff
}

How can I create a class like text-white using a mixin?

I am working on a HTML/CSS project. I want to create classes for labels and texts based on the color. For example

text-red{
    color: red;
}

label-white{
    color: white;
}

To do this I am trying to create a mixin which accepts a name and a color as argument and creates this class. I wrote the following mixin :

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

.mixin('white', white);

This gives me the following output

.text-'white'{ /* notice the quotes*/
    color: #ffffff
}

If I run this mixin as .mixin(white, white); I get

.text-#ffffff{
    color: #ffffff
}

How can I create a class like text-white using a mixin?

• javascript
• html
• css
• string
• less

Share Improve this question Follow asked Oct 13, 2013 at 20:27 drcocoadrcocoa 1,19511 gold badge1414 silver badges2626 bronze badges 2

• 2 If you do this you're gonna have a bad time. You might as well use inline styles. – Josh Leitzel Commented Oct 13, 2013 at 20:34
• I understand. I will think about the possibilities. Thanks for pointing to the posts. – drcocoa Commented Oct 13, 2013 at 20:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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);

LightStyle is right but if you have many named color to set, you could use a recursive loop with a list of string color like this :

.recursive-loop(@list_size, @list) when (@list_size > 0) {

    // Get the current color from the list @list at index @list_size
    @current_color: e( extract(@list, @list_size) );


    .myclass1-@{current_color} {
        color: @current_color;
    }

    .myclass2-@{current_color} {
        background-color: @current_color;
    }

    //etc...

    // until the end of list
    .recursive-loop( (@list_size - 1), @list)
}

.mixin-color(){

    // Add color you need to this list and get size of it.
    @list: "black", "dimgrey", "grey", "lightgrey", "white", "red", "blue", "green";
    @list_size: length(@list);

    // Call recursive loop with the preview list
    .recursive-loop(@list_size, @list);

}

// mixin call
.mixin-color();

I hope it will help...

本文标签： javascriptHow to escape quotes in Less variable which stores a color nameStack Overflow