Exploring LESS - improving CSS output by utilizing mixins for rule optimization

I've recently started experimenting with LESS. I decided to create rules for elements with numeric IDs, leading me to this code snippet:

@myRule: {padding: 0;};

.myLoop(@c, @rules) when (@c >= 0) {
    .myLoop((@c - 1), @rules);
    &[id*=@{c}] { @rules(); }
    &[name*=@{c}] { @rules(); }
}

.myClass {
  .myLoop(2, @myRule);
}

when compiled, it produces:

.myClass[id*=0] {
  padding: 0;
}
.myClass[name*=0] {
  padding: 0;
}
.myClass[id*=1] {
  padding: 0;
}
.myClass[name*=1] {
  padding: 0;
}
.myClass[id*=2] {
  padding: 0;
}
.myClass[name*=2] {
  padding: 0;
}

Is there a way to make it compile like this instead:

.myClass[id*=0],
.myClass[name*=0],
.myClass[id*=1],
.myClass[name*=1],
.myClass[id*=2],
.myClass[name*=2] {
    padding: 0;
}

I've searched for solutions like 'extending mixins', 'parametric extend' or 'extending ruleset', but they all seem to have unresolved issues. I'm reaching out to those more knowledgeable in less to see if there is a workaround.

Answer №1

A current limitation is preventing the extension of parametric mixins or scoped extends. The workaround involves extending a placeholder ruleset. For example:

.my-replicate(@num, @style) when (@num >= 0) {
    .my-replicate((@num - 1), @style);
    &[data-id*=@{num}], &[data-name*=@{num}] {@style();}
}

.my-placeholder-style {
    margin: 0;
}

.my-selector {
    .my-replicate(3, {
        &:extend(.my-placeholder-style); 
   });
}

In this snippet, .my-placeholder-style acts as the placeholder selector that will also be included in the final CSS output.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Next.js: Customizing the output format of CSS Modules classes

I'm a beginner with NextJS. I'm looking to update the CSS classes prefix + suffix to this new format: <li class="desktop__menu-item--2feEH"></li> <li class="desktop__menu-item--2feEH"></li> <li class ...

Using CSS to create a transition effect for fading in and out background images

I created a website with a captivating full-page background image (img/bg_start.jpg): If you hover your mouse over the central animal on the page, the current image (img/bg_start.jpg) will fade out and be replaced with another picture (img/bg_start2.jpg) ...

Using JQuery's div.show() function is causing the fields on my page to resize

I am facing an issue with a hide div that is supposed to show when a checkbox is clicked. The problem I'm encountering is that when the div shows up, the height of the input fields becomes too small. Here is the structure of my div: <div id=" ...

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...

Having trouble searching using CSS or XPath with Selenium Webdriver, but no issues when searching by ID or class

I am currently using Eclipse Mars along with JDK 1.8. Below is the code I have written: import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; public cla ...

Prevent click event from bubbling up in React and DOM event mix situations

We are offering a menu here. In case the menu is visible, users should be able to close it by clicking anywhere on the screen: class Menu extends Component { componentWillMount() { document.addEventListener("click", this.handleClickOutside) ...

Repositioning with Flexbox: shifting the middle element to a new line

I have a flex item that contains three divs. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬─ ...

Display Text Using a Variety of HTML Styles

Is there a way to achieve the following setup: HTML: <p>ABC</p> Output: DEF I am inquiring about this because I need to create an email template that includes the HTML snippet must contain <p>${__VCG__VAL__FIRST_NAME}</p> (where ...

What is the best way to dynamically adjust the height of an iframe based on its changing content

My webpage contains an iframe that loads content dynamically, and I want to center it on the page based on its height. The issue I'm facing is that while my code works well for increasing content heights, it fails to recognize when the content size de ...

What is the best way to determine if a value is missing in JavaScript and then stop the function while displaying an

I am currently working on designing a website and I am in need of a specific function that will halt if one input value is missing and then display an error message accordingly. Below is the HTML code for the form I am working on: <form action="htt ...

Struggling to achieve full height for div content between header and footer using Bootstrap 4?

This post may seem similar to others, but it's not. Please read carefully. I am looking to make the main container (<main role="main" class="container">) full-height between the header and footer using Bootstrap 4. Here is my HTML code: // I ...

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

.displaying a grid of div elements is not functioning as expected

On a single page, there is a grid of Divs (2 by 3) with a menu (<li> in <lu>) positioned to the left of the grid. Each menu section contains its own grid of divs, all enclosed within one main div to facilitate manipulation. Menu Sections: < ...

Animation will begin once the page has finished loading

On the website, there is a master page along with several content pages. The desired effect is to have a fade-in animation when navigating between pages. Currently, when clicking on a link, the new page appears first and then starts fading out, but this sh ...

convert a list of options into a dropdown selection menu

Is there a way to turn a regular menu into a dropdown menu for small devices without modifying the HTML code? I have a responsive design, but I'm not sure how to add that 'hamburger menu' style. Note: I am unable to make changes to the HTML ...

Shopify Inventory Dropdown Tailored to Stock Levels

I'm having an issue with my Shopify store. How can I make sure that the quantity dropdown matches the actual items in stock? For instance, if there are only 3 items available, the maximum value in the quantity dropdown should be set to 3. And if there ...

Tips for aligning content in the center of a row using Bootstrap 4

I am struggling to center the content, such as an image, in both the row and column. I have tried using justify-content-center, align-items, and text-align: center, but none of them are working for me. My goal is to have the image centered within the ro ...

What is the process for creating an HTML code that utilizes various CSS styles based on individual browsers?

I understand that conditional comments can be used for IE browsers (excluding IE10), but I am curious about how to achieve similar results in Firefox and Chrome. Do I need to create separate stylesheets for each browser? Please provide an example wit ...

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

Implementing FAQs on ASP.NET MVC is my latest project

I have stored all the questions and answers in a SQL Server table, and it is fetching them perfectly. The FAQ user interface displays all the questions correctly from the table. You can see the interface in action by clicking on the following links: Questi ...