What is the most effective way to utilize a loop in order to generate a comma-separated list of values that does not contain an additional comma

Using @for to generate multiple box-shadow arguments:

.myclass {

    $bxsw : "";
    @for $i from 1 through 10 {
      $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ",";
    }

    box-shadow: #{$bxsw};

}

This results in:

.myclass {
    box-shadow: -1px -1px brown, -2px -2px brown, -3px -3px brown, -4px -4px brown, -5px -5px brown, -6px -6px brown, -7px -7px brown, -8px -8px brown, -9px -9px brown, -10px -10px brown,;
}

Have you noticed the extra comma at the end? Firefox fails to render the box-shadows due to this. Is there a way to programmatically remove that last comma?

csssass

Answer №1

One straightforward approach is to concatenate items into a list separated by commas.

.myclass {
    $bxsw : ();
    @for $i from 1 through 10 {
      $bxsw : append($bxsw, $i * -1px $i * -1px brown, comma);
    }

    box-shadow: $bxsw;
}

Answer №2

Approach #1: To begin, establish a base value for $bxsw and then run the loop starting from 2:

.myclass {
    $bxsw : "-1px -1px brown";
    @for $i from 2 through 10 {
      $bxsw : $bxsw + ", -" + $i + "px -" + $i + "px " + brown;
    }

    box-shadow: #{$bxsw};
}

Approach #2: Another method involves checking if $bxsw is not empty before appending the comma:

.myclass {
    $bxsw : "";
    @for $i from 1 through 10 {
      @if ($bxsw != "") { $bxsw: $bxsw + ", "; }
      $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
    }

    box-shadow: #{$bxsw};
}

Approach #3: Additionally, it is possible to determine if the current iteration is the last one or not:

.myclass {
    $bxsw: ""; $from: 1; $to: 10;

    @for $i from $from through $to {
      $bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
      @if ($i < $to) { $bxsw: $bxsw + ", "; }
    }

    box-shadow: #{$bxsw};
}

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

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

Reverting back to the specified CSS style

In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...

cssoverriding

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

I am trying to create a 3D element that rotates on both the x and y axes based on the position of the mouse on the screen. While I have successfully achieved this effect using either the X or Y position, I am struggling to make it work simultaneously for b ...

jquerycssmousemove

Upon opening index.html in the browser, the jQuery code fails to execute, as no errors are displayed in the console

I am struggling to make a simple toggleClass() function work in jQuery and I can't seem to figure out why. This is just a beginner exercise for me with jQuery. The code works perfectly when I test it as a snippet or manually in the console, but when I ...

javascriptjqueryhtmlcss

Creating a CSS layout with tabs that include a visually appealing right space

My webpage is set up for tabbed browsing, with the tabs displayed as <li>s in block form. The parent div containing the tabs is floated to the right. However, I am encountering an issue where the last tab is not fully aligning with the right side of ...

css

I am struggling to get the pop-up to close using the current code. I suspect that the issue might be related to the variable I was previously using in WordPress. I have made changes but the pop-up

While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surpr ...

javascripthtmlcss

Toggle the visibility of the search Div using Angular UI

When using angular UI buttons, users can select search criteria by choosing between Patient, ID, or Date. If Patient or ID is selected, the searchByText div will be shown. If Date is selected, the searchByText will be hidden and the SearchBydateRange wil ...

javascriptjqueryhtmlcssangularjs

Issue with styling Icon Menu in material-ui

I'm having trouble styling the Icon Menu, even when I try using listStyle or menuStyle. I simply need to adjust the position like this: https://i.sstatic.net/n9l99.png It currently looks like this: https://i.sstatic.net/WeO1J.png Update: Here&apo ...

javascriptcssreactjsmaterial-ui

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks. TypeError: promise.catch i ...

htmlcssangularjsangular-ui-router

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Chrome not displaying transition effects after the page has finished loading

I've encountered an issue with a hidden div that is supposed to show on page load with a transition. While it works fine in Firefox, Chrome seems to be struggling to display the div. If you'd like to try it out yourself, here's the link for ...

jquerycssgoogle-chrometransition

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have be ...

javascriptcssreactjsmaterial-ui

Tips for eliminating the paddingRight in a MUI Drawer when it is opened

I'm facing a simple issue that I can't figure out how to solve. Every time the MaterialUI Drawer is opened, it adds some CSS styles to the body of my page. One of these styles includes a padding-right property which is causing alignment problems ...

reactjssassmaterial-ui

Tips for centering a button within the body of a webpage

Despite my efforts, the alignment is not working as expected. The CSS I am using specifies that every <div> button inside the body should be centered both vertically and horizontally. However, it seems like something is preventing this from happeni ...

htmlcssflexbox

Bootstrap CDN causing modals to fail to appear

Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...

htmlcssbootstrap-modal

What is the reason for the image not being positioned in the top left corner of the html page?

My simple HTML page consists of only one image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anz ...

htmlcssimage

Error: Unable to locate module 'next/font/google/target.css'

After setting up Next.js version 14.0.1 on Node.Js v20.9.0 and Ubuntu 20.04, I encountered an error right from the start. Failed to compile /var/www/html/C#/nextApp/app/layout.js Module not found: Can't resolve 'next/font/google/target.css?{&quo ...

cssnode.jsnext.js

What could be causing my buttons to malfunction once I've applied padding to the container?

I'm struggling with getting my buttons to appear active. They currently don't have any functionality and lack a hover effect when clicked. Despite my efforts to add effects, nothing seems to change. After experimenting with the CSS, I've no ...

htmlcssbuttonhyperlinkbootstrap-4

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

I am facing a problem where I am trying to display a circular div using CSS, but it only works if the background image property is set first. Typically, this wouldn't be an issue if the image wasn't being dynamically inserted using PHP code. I ...

css