Using a variable in a CSS selector with less

Question

Using a variable in a CSS selector with less

As a newcomer to LESS, I am starting by using it to streamline my stylesheets and reduce duplication. In an attempt to incorporate variables into a somewhat complex selector in less 1.2.21, I have written the following code:

@current_house_id: 97;
ul#house-family-menu li#menu-item-@current_house_id {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

To clarify, the original CSS would have looked like this:

ul#house-family-menu li#menu-item-97 {
    background: #8cb4e8 url(images/family-current.png) no-repeat 97% 50%;
}

Upon compiling with lessc, I encounter the following error:

Syntax Error: on line 268: expected one of [ ( . # * - :: : @media @font-face , { ; got @ after: ul#house-family-menu li#menu-item-

I have attempted various escape methods as suggested in different sources, but none seem to resolve the issue. Could it be that this feature is not supported in LESS? If not, perhaps I could consider an alternative approach, such as applying the styles individually.

Any assistance would be greatly appreciated.

css less

Answer 1

Answer №1

Here is some code:

@num: 10;

(~'.count{num}') {
    color: green;
}

Generates the following output:

.count10 {
    color: green;
}

Try this out:

@current_count: 25;
(~'span#item-count-@{current_count}') {    }

This will result in:

span#item-count-25 {    }

Note:

Version 2.0.0-beta has made a change ():

(~".newclass_@{index}") { ...

Instead of using selector interpolation, do this instead

.newclass_@{index} { ....

Also:

You are unable to perform selector interpolation with pseudo elements (as of v1.5.0). See open issue: https://github.com/less/less.js/issues/1294

Solution:

.myStyle(@whichPseudo) {
  @pseudo-element: ~":@{whichPseudo}";
    &@{pseudo-element} {
       border: 2px solid blue;
    }
}

#elementOne {
    .myStyle(before);
}

#elementTwo {
   .myStyle(after);
}

Answer 2

Here is some code:

@num: 10;

(~'.count{num}') {
    color: green;
}

Generates the following output:

.count10 {
    color: green;
}

Try this out:

@current_count: 25;
(~'span#item-count-@{current_count}') {    }

This will result in:

span#item-count-25 {    }

Note:

Version 2.0.0-beta has made a change ():

(~".newclass_@{index}") { ...

Instead of using selector interpolation, do this instead

.newclass_@{index} { ....

Also:

You are unable to perform selector interpolation with pseudo elements (as of v1.5.0). See open issue: https://github.com/less/less.js/issues/1294

Solution:

.myStyle(@whichPseudo) {
  @pseudo-element: ~":@{whichPseudo}";
    &@{pseudo-element} {
       border: 2px solid blue;
    }
}

#elementOne {
    .myStyle(before);
}

#elementTwo {
   .myStyle(after);
}

Using a variable in a CSS selector with less

Answer №1

Similar questions

Aligning text to the right within a div that is placed inside an image element

How can you quickly check an element's visual properties following a CSS modification?

When Css is incorporated within a text, it prevents the use of " " from functioning properly

Issues with navigation menus in Bootstrap/Wordpress

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Exploring the techniques for displaying and concealing div elements with pure JavaScript

Let the numerical tally commence once we arrive at said juncture

Adjusting image size to accommodate responsive column cell using CSS

Add aesthetic flair to scrollable containers

Is there a way to relocate the play again button below the box?

The Bootstrap 4.5 code is not functioning as anticipated

Having trouble with the page background image link not functioning properly because of the wrapper

Positioning of the header that adapts and adjusts based

What is the best solution for setting up a div containing a table with images inside?

What is the best way to incorporate annotations onto a website without impacting the overall design and layout?

Chrome failing to import images, but Firefox has no issues with image importing

Tips on increasing video size upon visiting a website. HTML, JavaScript, and potentially jQuery can be used for video animation

The CSS for selecting the input[type="submit"] element is not functioning as expected

Get rid of the lower padding on a handsontable

Navigation bar transforms color once a specific scroll position is reached