Nested mixins or functions in SASS

Question

Some body know how can i use nested mixins or functions in SASS? I have something like this:

@mixin A(){
    do something....
}

@mixin B($argu){
    @include A();
}

yeah you doing it right. You can call first mixin in second one. [check this pen](http://codepen.io/crazyrohila/pen/vuljA). — crazyrohila, Apr 15 '13 at 16:40
oh, thank you! i tried with this, but isnt working, maybe my ruby is crashing. I will try to re-install. Thank you. (codepen is amazing!, not yet known) — iLevi, Apr 15 '13 at 16:43
Sorry I have deleted last pen by mistake. so created a new pen. — crazyrohila, Apr 15 '13 at 18:05
It's unclear here why running this code didn't answer your question. — cimmanon, Apr 05 '16 at 12:31

score 24 · Accepted Answer · answered Apr 15 '13 at 18:04

24

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

answered Apr 15 '13 at 18:04

crazyrohila

616
4
9

score 12 · Answer 2 · answered Apr 05 '16 at 07:04

12

You can multi nest mixins, you can also use place holders inside mixins..

@mixin a {
  color: red;
}
@mixin b {
  @include a();
  padding: white;
  font-size: 10px;
}
@mixin c{
  @include b;
  padding:5;
}
div {
  @include c();
}

which gives out CSS

div {
  color: red;
  padding: white;
  font-size: 10px;
  padding: 5;
}

answered Apr 05 '16 at 07:04

Ignatius Andrew

8,012
3
54
54

3

It must be noted that order of mixin is important i.e. if you move `@mixin a{...}` at the bottom of above code, sass generate compile error `Undefined mixin 'a'` – dkjain Feb 09 '17 at 13:19
1

any reason `b` is not `b()` in `@include b;` ? – ajax333221 Jul 10 '18 at 17:42
4

@ajax333221 mixins don't HAVE to have parameters, if you don't specify params then the () are optional. – orionrush Sep 26 '19 at 16:33

score 4 · Answer 3 · answered Sep 21 '16 at 20:12

As mentioned in the other answers, you can include mixins in other mixins. In addition, you can scope your mixins.

Example

.menu {
  user-select: none;

  .theme-dark & {
    color: #fff;
    background-color: #333;

    // Scoped mixin
    // Can only be seen in current block and descendants,
    // i.e., referencing it from outside current block
    // will result in an error.
    @mixin __item() {
      height: 48px;
    }

    &__item {
      @include __item();

      &_type_inverted {
        @include __item();

        color: #333;
        background-color: #fff;
      }
    }
  }
}

Will output:

.menu {
  user-select: none;
}

.theme-dark .menu {
  color: #fff;
  background-color: #333;
}

.theme-dark .menu__item {
  height: 48px;
}

.theme-dark .menu__item_type_inverted {
  height: 48px;
  color: #333;
  background-color: #fff;
}

Scoping mixins means that you can have multiple mixins named the same in different scopes without conflicts arising.

Nested mixins or functions in SASS

3 Answers3

Linked