Resolving the problem with iterating through $list using SCSS/SASS @mixin

Consider the following list:

$box-shadow-properties: -webkit-box-shadow, -moz-box-shadow, box-shadow;

I am attempting to create a mixin that iterates through this list:

@mixin box-shadow-with-inset($box-shadow-params, $inset-params) {
  @each $property in $box-shadow-properties {
    $property: $box-shadow-params, $inset-params;
  }
}

My goal is to then use this mixin like this:

@include box-shadow-with-inset(0px 1px 3px rgba(0, 0, 0, 0.25), inset 0px -1px 0px rgba(0, 0, 0, 0.1));

Despite no compile errors, the mixin does not compile to the CSS file and seems to be completely ignored. Any suggestions on how to address this issue?

Answer №1

Discovered the solution. It seems that when using property names in combination with a list, interpolation is necessary. Therefore:

INCORRECT:

$property: $box-shadow-params, $inset-params;

CORRECT:

#{$property}: $box-shadow-params, $inset-params;

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

Tips for positioning a div element at the center in ASP.NET

I have written the following code snippet: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit ...

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

jQuery accordion section refuses to collapse

In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...

The Bootstrap 5 gem caused a production build error on Netlify

After cloning a repository, I started using Jekyll 4 and integrating the Bootstrap 5 gem from this repository. The project works fine locally, but runs into issues in the production environment. I am hosting the site on Netlify and noticed that the build ...

Is there a way in CSS to set a label's width equal to the width of its content?

I am facing an issue where I need the question mark div to be positioned right next to the top row of text in the label it is associated with. Can someone suggest some styles that can be applied to the label to adjust the width and spacing so that it match ...

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...

Tips on creating a React Vite Typescript website that utilizes the entire height and ensures a minimum width

I'm currently working on building a portfolio webpage with React, Vite, and Typescript, but I'm facing an issue where the content is not taking up the full height of the page. I have multiple pages with different lengths of content that I want to ...

What is the process for inserting images into a vertical timeline format?

I am currently working on building a timeline and incorporating images into it. I came across a solution on W3 that I'm trying to implement, but I'm facing some challenges. I've been experimenting with the code but I feel like there are part ...

I am having trouble showing the background image in the div

I created a 960 layout using 3 divs to easily organize child divs with images and text. However, I'm having trouble getting the background image of the first div to display. Can you help me figure out what I'm doing wrong? This is the concept f ...

Tips on using CSS to hide elements on a webpage with display:none

<div class="span9"> <span class="disabled">&lt;&lt; previous</span><span class="current numbers">1</span> <span class="numbers"><a href="/index/page:2">2</a></span> <span class="num ...

Can the CSS color of struts2-jquery-grid-tags be modified?

Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items. On the right side, there is another column showcasing multiple cards inside a .row. Th ...

Issue with displaying website monitors

I am facing an issue with my website where it displays differently on various monitors. Below is the HTML and CSS code snippets: HTML <body> <div id="Links"> <a href="About.html"><img src="Slideshow/About.png" width="140em" />< ...

Bug in ExtJS 4 causing the clickrepeater to be disabled when using the datepicker

I've developed a custom subclass of the DatePicker class. Within the update() method, I have implemented logic to disable the prevRepeater if the current month matches the month of the minDate property: me.prevRepeater.setDisabled(me.minDate &&am ...

Display a single button on hover in Angular 2+ framework

I'm looking to have the 'Edit' button only appear when I hover over a selected row. Here's the code: https://stackblitz.com/edit/inline-edit-change-edit2-j8b2jb?file=app%2Fapp.component.html I want the 'Edit' button to show u ...

Does vuetify offer a card footer or card deck feature in its designs?

I'm trying to achieve a layout similar to this: https://getbootstrap.com/docs/4.0/components/card/#card-groups https://i.sstatic.net/HxKEh.png The goal is to keep the height of the box consistent even when the description varies Here's my code ...

Creating custom designs for Material UI components

Although not a major issue, there is something that bothers me. I am currently using react, typescript, and css modules along with . The problem arises when styling material ui components as I find myself needing to use !important quite frequently. Is th ...

Issues with HTML Email display

Hey there, I am facing an issue while trying to send an HTML email. I am aware that Outlook does not support a lot of CSS formatting, but I can't figure out why this simple setup is breaking. Is there a quick fix or alternative solution? Take a look a ...

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...