web-dev-qa-db-fra.com

Mixins ou fonctions imbriqués dans SASS

Certains corps savent comment utiliser des mixins ou des fonctions imbriqués dans SASS? J'ai quelque chose comme ça:

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

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

ouais tu le fais déjà bien. Vous pouvez appeler le premier mixin dans le second. vérifiez ce stylo http://codepen.io/crazyrohila/pen/mvqHo

22
crazyrohila

Vous pouvez imbriquer plusieurs mixins, vous pouvez également utiliser des espaces réservés à l'intérieur des mixins.

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

qui donne CSS

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

Comme mentionné dans les autres réponses, vous pouvez inclure des mixins dans d'autres mixins. De plus, vous pouvez définir vos mixins.

Exemple

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

Sortira:

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

L'étendue des mixins signifie que vous pouvez avoir plusieurs mixins nommés de la même manière dans différentes étendues sans que des conflits ne surviennent.

3
Frederik Krautwald