sass

Your problem might better be solved by using variables to contain your selectors. By using a mixin, you’re losing the ability to chain it with similar elements. $form-input-text: ‘input[type=”text”], input[type=”password”], input[type=”search”], input[type=”email”], input[type=”tel”], input[type=”url”]’; $form-input-buttons: ‘input[type=”submit”], input[type=”reset”], input[type=”button”], button’; $form-input-dates: ‘input[type^=”date”], input[type=”month”], input[type=”week”], input[type=”time”]’; $form-input-not-radio: ‘input:not([type=”radio”]):not([type=”checkbox”])’; #{$form-input-text}, textarea { @include border-radius(.25em); border: $form-input-border; } #{$form-input-text}, … Read more

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

You want to use multiplication to apply a unit, rather than concatenation: @mixin latLong ($lat, $long) { left: (($long + 180) * (930/360)) * 1%; top: (($lat + 90) * (530/180)) * 1%; }

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;

Extends, as you’ve already discovered, can get rather messy. I would go about solving your problem by using an @content aware mixin in combination with global variables (this uses mappings, which are part of 3.3… you can do it with lists of lists, but it’s a little less elegant): $base-color: null; // don’t touch $accent-color: … Read more

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

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