Sass Mixin Error for Ie Specific Filters Like -Ms-Filter

Skipping an optional argument in Sass mixin

Starting from SASS 3.1 you can pass named arguments to do that:

@include linear-gradient($from: #7a7a7a, $to: #1a1a1a, $ie-filters: true);

The rest will be default.

Nested mixins or functions in SASS

yeah you already doing it right. You can call first mixin in second one. check this pen http://codepen.io/crazyrohila/pen/mvqHo

Doing math on variable argument Sass mixins

It seems what I really needed to use here was a list rather than a variable argument in order to manipulate each value separately.

I first tried doing this with the @each directive, but couldn't figure out how to use it inside a declaration. This throws an error:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

So I ended up writing something much more verbose that handles each of the four possible cases separately (i.e. you pass 1, 2, 3 or 4 arguments). That looks like this and works as I wanted:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

I made collection of rem mixins including this one as a Gist here https://gist.github.com/doughamlin/7103259

How to use SCSS mixins with angular 7

Either import the file in component.ts as

styleUrls: ['./styles.scss']

or

use SASS/SCSS import to import in component.scss

@import "styles.scss";

SASS Module Error when trying to use @use rule

The @use keyword is unfortunately not supported in node-sass (yet). Lets hope that they bring support in the near future. Till then, you can use the @import syntax.

---

Related Topics