Miscelazioni o funzioni nidificate in SASS

Question

Alcune parti sanno come posso utilizzare i missaggi nidificati o le funzioni in SASS? Ho qualcosa di simile:

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

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

Answer 1

sì già lo fai bene. Puoi chiamare il primo mixin nella seconda. controllare questa penna http://codepen.io/crazyrohila/pen/mvqHo

Answer 2

È possibile multiple mixins nidificare, è anche possibile utilizzare segnaposto all'interno mixins ..

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

che dà fuori CSS

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

Answer 3

Come già detto nelle altre risposte, può includere mixin in altri mixin. Inoltre, puoi ampliare i tuoi mixaggi.

Esempio

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

uscita sarà:

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

mixins di ambito significa che è possibile avere più mixins chiamati lo stesso in ambiti diversi senza conflitti derivanti.