Tips on avoiding quotation marks in a Less variable containing a color identifier

Question

Tips on avoiding quotation marks in a Less variable containing a color identifier

I'm currently working on an HTML/CSS project where I aim to establish classes for labels and texts based on their color. For instance:

.text-red{
    color: red;
}

.label-white{
    color: white;
}

In order to achieve this, my approach involves creating a mixin that takes a name and a color as arguments to generate these classes. Here is the mixin I've drafted:

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

.mixin('white', white);

Upon executing this mixin, the output I receive is:

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

If I were to run the mixin as .mixin(white, white); It yields:

.text-#ffffff{
    color: #ffffff
}

Inquiry: Is there a way for me to construct a class like text-white using a mixin?

javascript html css string less

Answer 1

Answer №1

According to the reference on LESS "e" function:

e(@string); // escape string content

By using the e function, you will obtain the correct outcome.

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

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

An alternative approach is to define a variable and then utilize it for multiple purposes:

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

Answer 2

According to the reference on LESS "e" function:

e(@string); // escape string content

By using the e function, you will obtain the correct outcome.

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

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

An alternative approach is to define a variable and then utilize it for multiple purposes:

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

Answer 3

Answer №2

LightStyle is correct, but if you find yourself needing to set multiple named colors, you can utilize a recursive loop with a list of string colors like the example below:

.color-loop(@list_length, @colors) when (@list_length > 0) {

    // Retrieve the current color from the list @colors at index @list_length
    @current_color: e( extract(@colors, @list_length) );


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

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

    // add more classes as needed

    // continue until end of list
    .color-loop( (@list_length - 1), @colors)
}

.mixin-color(){

    // Specify the colors you need in this list and determine its size.
    @colors: "black", "dimgrey", "grey", "lightgrey", "white", "red", "blue", "green";
    @list_length: length(@colors);

    // Invoke the recursive loop with the provided list
    .color-loop(@list_length, @colors);

}

// calling the mixin
.mixin-color();

I trust this solution will be beneficial...

Answer 4

LightStyle is correct, but if you find yourself needing to set multiple named colors, you can utilize a recursive loop with a list of string colors like the example below:

.color-loop(@list_length, @colors) when (@list_length > 0) {

    // Retrieve the current color from the list @colors at index @list_length
    @current_color: e( extract(@colors, @list_length) );


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

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

    // add more classes as needed

    // continue until end of list
    .color-loop( (@list_length - 1), @colors)
}

.mixin-color(){

    // Specify the colors you need in this list and determine its size.
    @colors: "black", "dimgrey", "grey", "lightgrey", "white", "red", "blue", "green";
    @list_length: length(@colors);

    // Invoke the recursive loop with the provided list
    .color-loop(@list_length, @colors);

}

// calling the mixin
.mixin-color();

I trust this solution will be beneficial...

Tips on avoiding quotation marks in a Less variable containing a color identifier

Answer №1

Answer №2

Similar questions

Using JavaScript, create a set of buttons within a div element and implement

Minify Magic Dreamweaver Plugin

CSS uses color parameters in the same way

Tips for effectively using the question mark as a separator in a webservice URL

Create and export a React component with dual properties

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

Managing date fields retrieved from a REST Api in AngularJS

Steps for positioning an element to the left and center of a div

Speaking about the `this` Vue component in an event listener context

Objective-C and the World of WebSockets

Selector for the Nth child element

What is the best way to trigger multiple actions from a single form in Struts 1?

"Unraveling the depths of a multidimensional array in JavaScript: a comprehensive guide

Attempting to instruct my chrome extension to execute a click action on a specific element found within the webpage

Transitioning from Global Namespace in JavaScript to TypeScript: A seamless migration journey

Pass RGBA color code from JavaScript to Laravel controller

Grouping various event listeners within a v-for loop

The function Server.listeners is not recognized by the system

Customizing the primary CSS style of an element without the need to individually reset every property

The menu field remains open even after clicking on the menu