I’m migrating my SCSS files from @import to @use, as @import is being deprecated. I have a mixin defined in a separate file that relies on a global SCSS variable. Here’s an example:

My PWA adjusts the variables in a .scss file like this:

I’m struggling with a SCSS mixin to apply grid-column-start and grid-column-end based on some predefined breakpoints with media queries. I can loop through without the media query for the desired result in outputting 1 from 12 but how can I also use the same @each loop to loop through my media query sc mixin?

I have a situation where I am using @use ... with to load styles from a component library and customise some of the values

I want to make an SCSS function that creates gradient color stops that transition between two colors, using a Gaussian curve. This would be useful to simulate things like shadows and glows where box-shadow can’t do the job or is not ideal (for example, masks).

I have three files: a.scss,b.scss,c.scss;
The relationship between these three files:
c @use b as *
b @use a as *

$colors: ( red: “red” ); @each $key, $value in $colors { $key: $value; } I want to be able to define a scss variable $red: “red”;, but it failed. Or is there any way to destructure $colors? sass

I have a nest map and want to use a value to find the object and return an object

we are using sass nowadays. here when we tried to add src img path like “/us/products/sites/default/files/2024-05/error-invalid_3.png” which is in dam not taking getting error in map.js file

I have the following SASS directory structure: