Combine a variable and a string to create a new variable

Question

Combine a variable and a string to create a new variable

@color-purple: "#ffffff"


@colors: purple, light-purple, green, light-green, red, light-red, grey, light-grey, lightest-grey;


.ColorsMixin(@i:0) when(@i =< length(@colors)){ //loop over icons array


    @color: extract(@colors, @i); //extract the icon at current index @i

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

        &:before{
            content: "@{color}";
        }

        &:after{
            content: "\@{color-@{color}}";
        }

    }

    .ColorsMixin(@i + 1);
}


.ColorsMixin();

In order to achieve the desired outcome for the

content: "\@{color-@{color}}";

section, I have successfully generated:

content: "#ffffff";

However, encountering an issue when attempting to output the @color-purple variable as the background. LESS triggers an error in this case. It appears to function only with quotation marks enclosing it, yet the background property necessitates the hex code without quotes.

Is there a specific method to overcome this challenge?

css less

Answer 1

Answer №1

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

The Less syntax above is incorrect, the correct way to write it would be:

background: ~'@{color-@{color}}';

It's worth noting that using escaping to indirectly refer to variable values is considered a dirty workaround. While it may work when assigning the value directly to a CSS property, it can cause issues elsewhere as the value becomes an unquoted string with unpredictable content. For example, the following code will not work:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(~'@{color}', 50%); // This will result in an error
}

A better approach in Less is using "variable reference" to access a variable value by its name:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(@@color, 50%); // This will give the correct color value
}

Furthermore, consider if having all colors as separate variables with their names is really necessary. In most cases, having a single list containing both color names and values is more efficient and manageable.

Answer 2

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

The Less syntax above is incorrect, the correct way to write it would be:

background: ~'@{color-@{color}}';

It's worth noting that using escaping to indirectly refer to variable values is considered a dirty workaround. While it may work when assigning the value directly to a CSS property, it can cause issues elsewhere as the value becomes an unquoted string with unpredictable content. For example, the following code will not work:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(~'@{color}', 50%); // This will result in an error
}

A better approach in Less is using "variable reference" to access a variable value by its name:

@color-dark-purple: #321;

div {
    @color: 'color-dark-purple';
    background: fade(@@color, 50%); // This will give the correct color value
}

Furthermore, consider if having all colors as separate variables with their names is really necessary. In most cases, having a single list containing both color names and values is more efficient and manageable.

Combine a variable and a string to create a new variable

Answer №1

Similar questions

Attempting to preserve the CSS transform effect as I switch between menu options

Curvature Factor equals Overflow of Color

Effective URL structure with nested ui-view in AngularJS

Having difficulty connecting images or photos to CodePen

Is it possible to target elements based on a specific CSS3 property they use?

Steps to Delete Branding WHMCS Ver 8.1 "Powered by WHMcomplete solutions"

Expanding SVG Button Overlay in ChakraUI

What fate befalls CSS rules left untouched?

Unable to horizontally center ul element within Materialize navigation content

"Struggling with the height of Bootstrap row not filling the entire space

Steering your pop up to the top with CSS

Multi-line auto-suggest list with typeahead functionality

Make sure all the table rows have the same height to completely fill the table regardless of the number of rows

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

Items are overflowing the flex container, exceeding its boundaries

"What might be causing the error 'cannot access property 'top' of undefined' while trying to read

Integrate Tailwind CSS into the bundled JavaScript file

Utilizing mobile emulators to optimize the viewport for mobile application development

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

Applying CSS styles to my container through a button click event