Zagnieżdżone miksy lub funkcje w SASS

Question

Niektóre treści wiedzą, jak używać zagnieżdżonych mixin lub funkcji w SASS? Mam coś takiego:

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

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

Answer 1

Tak, już to robisz dobrze. Możesz wywołać pierwszy mixin w drugim. sprawdzić ten długopis http://codepen.io/crazyrohila/pen/mvqHo

Answer 2

Można Multi wstawek gniazdo, można również korzystać posiadacze miejsce wewnątrz wstawek ..

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

który daje się CSS

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

Answer 3

Jak wspomniano w innych odpowiedzi, ty może zawierać mixiny w innych mixinach. Ponadto możesz zmieniać swoje miksy.

Przykład

.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; 
     } 
    } 
    } 
} 

wyświetli:

.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; 
} 

scopingu wstawek oznacza, że ​​można mieć wiele wstawek nazwanych tak samo w różnych zakresach bez konfliktów wynikających.