Multiple values for one property with variable argument lists in Sass

You can create a variable outside the loop to “collect” the shadow values, and then use that variable in your text-shadow property. Example: =stacktextshadow($shadows…) $all: () @for $i from 1 through length($shadows) $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma) text-shadow: $all h1 +stacktextshadow(blue, red, green) Output: h1 { text-shadow: 1px 1px 0 blue, 2px … Read more

Sass color variable not working inside darken()

The problem is that darken function requires a color as first argument and, instead, you’re trying to pass a string. type-of(#6B46C1); // returns color type-of(“#6B46C1”); // returns string So you should remove all quotes in $innerPagesBgColors: $innerPagesBgColors: #6B46C1, #2980B9, #FD5456, #000;

Using variables for CSS properties in Sass

You need to use interpolation (eg. #{$var}) on your variable in order for Sass to treat it as a CSS property. Without it, you’re just performing variable assignment. @mixin w_fluid($property_name, $w_element, $w_parent:16) { #{$property_name}: percentage(($w_element / $w_parent)); }

Sass calculate percent minus px

Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide “100%” is in terms of pixels or any other unit. That’s something only the browser knows. You need to use calc() instead. Check browser compatibility on Can I use… .foo … Read more

Define variables in Sass based on classes

No. What you’re asking for would require Sass to have knowledge of the DOM. Sass only compiles directly to CSS, it is never sent to the browser. With your sample code, all you’re doing is overwriting $basicFont every time. In version 3.4 or later, your variable will only exist within the scope of the block … Read more

Math with interpolated variables?

Sass cannot perform arithemetic operations on strings, only concatenation. When you use interpolation, what you’ve created is a string that looks like a number: @debug type-of(#{10px}); // string @debug type-of(’10px’); // string @debug type-of(unquote(’10px’)); // string @debug type-of(10px); // number If you want a number, do not use interpolation and do not use quotes. For … Read more