Issue with the for loop functionality in a less CSS mixin

After observing that a section of Less that I believed was functioning correctly is not producing all the styles I require, I realized that my for loop is not functioning properly.

The specific less code snippet in question is:

.for(@list, @code) {
    & {
        .loop(@i:1) when (@i =< length(@list)) {
            @value: extract(@list, @i);

            @code();

            .loop(@i + 1);
        }

        .loop();
    }
}

.role-variants(@variants, @props){
    .for(@variants, {
      .security_class_@{value} {
        @props();
      }
    });
}

@admin-roles: admin, admin_manager, admin_user, admin_manager_user;

html{
    body{
        &.admin{
            .role-variants(@admin-roles, {display: block;});
        }
    }
}

On , this code compiles correctly, generating the anticipated classes.

However, when compiling locally, only the following class is generated:

html body.admin .security_class_admin {
    display: block
}

Although the for loop functions properly when using the less compiler on the website, it fails to work locally. I am unsure whether I need to adjust the code for local compilation or update my environment to a specific version, despite it being current.

Thank you for your assistance.

- Jamie

Answer №1

After some adjustments, my loop is now functioning correctly. Here is the updated version:

.for(@list, @code) {
    & {
        .loop(@index) when (@index > 0) {
            @value: extract(@list, @index);
            @code();
            .loop((@index - 1));
        }
        .loop(length(@list));
    }
}

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

Leveraging webpack for loading images in a React application

I am encountering an issue with loading images after deploying to the server. I am unsure of the cause, but only a few images seem to render properly when using npm. Upon analysis: https://i.stack.imgur.com/ICgCN.png If the images load correctly with a ...

Design the button element with input text using CSS styling

https://i.sstatic.net/3vdRV.png Is there a way to stylize input text and buttons similar to this using CSS or Vuetify JS? ...

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

How can one determine the proper size for a border?

Can the border of a div be larger than the actual dimensions of the div itself? For instance, if the div is 10x10 in size, is it possible to have a border that is 20x10? ...

The Ineffectiveness of the Form Class

I have been trying to personalize the appearance of my bootstrap form by applying my own custom CSS. However, despite creating a class for my form and making changes to its CSS properties, the style of the form remains unchanged. Take a look at my form: ...

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it. Here's the scenario at runtime: https://i.sstatic.net/IovGr.png I a ...

Adding dynamic HTML to the body in AngularJS based on URL alterations

I am currently developing a single-page application using Angular. I am trying to create a card stack made of divs, similar to this concept. https://i.stack.imgur.com/42M06.png The idea is that the app will have various URL links and a card should be app ...

Unlock maximum screen viewing on your custom video player with these steps to activate fullscreen

I'm having an issue with my basic video player - when toggling fullscreen, it doesn't fill the whole screen even though I tried using .fullscreen{width:100%} without success after searching for a solution. html <div class='player-contai ...

What are the dimensions for maximum picture width and height in the Bootstrap 4 grid class col-4? Additionally, can you provide some tips on minimizing image bl

Hey there! I am trying to arrange 3 screenshots in 3 separate columns in one row, resembling steps 1, 2, and 3. I want them all to have the same size. Can you advise on the maximum width and height I should use before they start getting stretched or comp ...

npm is asking for a peer to be installed, but none was found

I am facing some warnings that I can't seem to resolve. Despite my attempts at installing the required dependencies, I have not been successful. npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0f041843050b171901 ...

Employing the `instanceof` operator on instances generated by constructors from complex npm dependencies

Context: In one of my npm modules, I've implemented error handling code with a custom error type called CustomError: function CustomError () { /* ... */ } CustomError.prototype = Object.create(Error.prototype); CustomError.prototype.constructor = Cu ...

Issue with font-family not being applied in PHP code

Struggling to preview different fonts? The code below should work, however, the font doesn't seem to change. Check out the output: my Text - Arial.ttf - 1 my Text - Batman.ttf - 1 my Text - Verdana.ttf - 1 While the font is being detected, it& ...

Adjust the number of images in each row based on the width of the screen

I have experimented with various methods, but none seem to work flawlessly. My goal is to neatly display around 50 images in rows and columns, adjusting the length of each row based on the screen width. Here are the approaches I've tried: Placing ...

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

Combine less files in webpack to generate a single minified CSS output file

Can webpack be used to combine multiple less files into one minified CSS file? I'm having trouble setting different output paths for my files. How can I make my CSS file output to './assets/stylesheets/bundle/' instead of './assets/ja ...

Having trouble with the npm run eject command?

Encountering an issue post executing npm run eject in my React project. If anyone has a solution to this problem (refer to the error in the image), please let me know. https://i.stack.imgur.com/FkNOf.png Appreciate any help provided. Thank you! ...

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

Ensure that the text on the button is aligned to the right and is positioned directly

Looking to adjust the alignment of the menu icon on the left side of the menu text. Unsure about the best approach with my current CSS - should I utilize a grid layout to separate them on one side each, or perhaps use flexbox to align them inline? Below i ...

Kudu's attempt at npm installation was unsuccessful

I am encountering a peculiar error while attempting to deploy my project using Kudu on Azure. The project has been built with dotnet and VueJs, following this template: "https://github.com/MarkPieszak/aspnetcore-Vue-starter" Despite setting the WEBSITE_N ...

SwipeJS experiencing technical difficulties

My Swipe.Js version : "^7.0.2" Today, I attempted to use Swipe.Js and encountered an issue with my import code. import { Swiper, SwiperSlide } from 'swiper/react'; as described on https://swiperjs.com/react#installation. However, when ...