Salut, 

Je suis actuellement sur cette partie du cour sur SASS, jusque là il n'y avais pas de soucis, jusqu'au moment où l'auteur nous conseille de retourner les valeurs au sein d'une fonction.

"Plutôt que de modifier $colour, faites en sorte que la fonction retourne la nouvelle valeur de couleur directement. Pour faire cela, vous pouvez utiliser @return :"

Donc au lieue de ça:

@mixin heading-shadow($colour: @if ( lightness($colour) < 25% ) {
      $colour: lighten($colour, 10%);
  }@else{
      $colour: darken($colour, 10%);
  }, $size: $heading-shadow-size){
  text-shadow: $size $size $colour;
}

Avec l'utilition de @return cela donne:

@function lightness-shift($colour){
  @if ( lightness($colour) < 25% ) {
      @return lighten($colour, 10%);
  }@else{
      @return darken($colour, 10%);
  }
}

Jusque là pas de soucis, sauf que lorsque l’auteur ajoute cette fonction à une mixin, ce qui viens de nous être expliqué est totalement négligé:

@mixin heading-shadow($colour: lightness-shift($colour-primary), $size: $heading-shadow-size){
  @if ( lightness($colour) < 25% ) {
      $colour: lighten($colour, 10%);
  }@else{
      $colour: darken($colour, 10%);
  }
  text-shadow: $size $size $colour;
}

Pourquoi est-ce qu'on ne pourrait pas écrire ceci à la place ?:

@function lightness-shift($colour){
  @if ( lightness($colour) < 25% ) {
      @return lighten($colour, 10%);
  }@else{
      @return darken($colour, 10%);
  }
}


@mixin heading-shadow($colour: lightness-shift($colour-primary), $size: $heading-shadow-size)
{ 
  text-shadow: $size $size $colour;
}

Puisqu'on a définit la fonction au préalable, il suffit juste de l'apeller non ? 

Merci d'avance, bonne soirée.

-
Edité par SNBC 15 novembre 2019 à 14:07:19

bonjour,

Bin oui mais c'est ce qui est écrit quelques lignes plus bas...... 

@mixin heading-shadow($colour: lightness-shift($colour-primary), $size: $heading-shadow-size){
  color: $colour;
  text-shadow: $size $size $colour;
}

elle est bien appelé dans la mixin et précisé dans $colour avec comme paramètre $colour-primary.

Moi ce que je comprend pas c'est que si on renseigne une couleur alors la function ne s'applique plus vue qu'elle est appelé pour modifié la valeur par défaut si aucun paramètre n'est saisi pour $colour

ex:

.form {
&__heading {
  @include heading-shadow($colour-white);
}
}

La une valeur est renseigné donc lightness-shift ne peu pas être appelé vue quil est appliqué à la valeur par defaut :  ($colour-primary)

Non? 

-
Edité par kalounne 9 juillet 2020 à 17:09:08