Bonjour, 

Je suis le cours suivant : https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass/6599091-creez-et-utilisez-des-fonctions et je coince au niveau de la création de la fonction de l'exercice.

J'avoue que déjà dans la fonction présentée juste avant l'exercice, quelque chose m'échappe. Déjà, je ne comprends pas l'intérêt de la duplication de code. Je pensais créer la fonction puis simplement l'appeler dans le mixin hors ici dans l'exemple, la condition se répète. De plus, si j'applique le code tel quel, de mon côté, il ne fonctionne pas.

Dans l'exercice, je suis pas à pas ce qui est expliqué et je n'obtiens rien de fonctionnel... 

Voici mon code : 

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,900i');
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

@mixin test($color: pastel($color-primary))
{
  background-color: $pastel;
}

@function pastel($clr)
{
  $hue: $clr;
  $sat: 100%;
  $light: 90%;
  $pastel: hsl($hue, $sat, $light);
  @return $pastel;
}

$color-primary: #15DEA5;
$color-accent: #FFF;

.btn {
  cursor: pointer;
  padding: 1.5rem 3rem;
  border-radius: 10rem;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  color: $color-accent;
  background: $color-primary;
  &:hover {
    @include test($color-primary);
  }
}

Je suis malade et mon fils n'a pas école donc je pense que je n'y vois peut-être pas clair mais ça fait deux jours que je me remets dessus et je ne comprends pas ce qui cloche. J'aimerai avancer mais le code avant l'exercice ne fonctionne pas et vu qu'il n'y a pas de corrigé dans l'exercice, je ne vois pas comment comprendre ici et avancer :(. 

Merci pour votre aide.

Hello Laure, je suis sur cet exercice et je te rassure, je bloque aussi. Ce cours est vraiment mal expliqué je trouve. 

Sinon, ça fait plusieurs messages que je vois sur le forum et le temps de réponses n'a pas l'air fou...

J'ai une question, dans ton code pourquoi tu as l'argument $color dans ton mixin? Vers quoi il pointe ? 

-
Edité par MatthieuRebuffat 17 janvier 2020 à 10:39:29

Bonjour Matthieu,

Il semble manquer quelque chose car le code fournit ne fonctionne pas, je l'ai testé sur codepen mais ça ne donne rien. Dommage qu'il n'y ait, en plus, aucune correction pour cet exercice.

J'ai tellement remanié mon code que je ne sais plus trop à quoi correspondait $color, j'ai vu des personnes qui ont posé des questions sur SASS déjà l'an passé et restées sans réponses, j'ai donc continué à chercher et testé.

J'ai essayé de recommencer sans suivre l'exemple du cours avec ce que j'avais compris. Ca ne marche pas mais c'est beaucoup plus simple peut-être pour essayer de comprendre dans un premier temps. J'ai essayé ceci : 

// V A R I A B L E S 
$black: #000;
$white: #fff;
$color-primary: $black;
$text-color: #ed159a; //fuschia


// C O D E 
@function couleur-fond($color: $color-primary)
{
   @if($color-primary == $black) 
  {
    @return $text-color== $white;
  }
  @else
  {
    @return $text-color == $black;
  } 
  color: $text-color;
}

// mixin visant à changer la couleur du texte en fonction du fond d'écran
@mixin text-color-shift($color: couleur-fond($color-primary))
{
  @if($color-primary == $black) 
  {
    $text-color: $white;
  }
  @else
  {
   $text-color: $black;
  }
}

body
{
  background-color: $color-primary;
  color: $text-color;
  @include text-color-shift;
}

Mais encore une fois, ça ne fonctionne pas et ça me parait tellement logique... je ne vois pas ce qui cloche. 

-
Edité par laure79 17 janvier 2020 à 12:54:43

Re, 

Moi aussi je pense qu'il y a une erreur puisque quand tu fait du scss, le css compilé derrière ne bouge pas, en particulier pour le &:hover du bouton.

Rien ne se passe...et je trouve ça chaud que personne (admin) n'est encore répondu à ton message.

MatthieuRebuffat a écrit:

Rien ne se passe...et je trouve ça chaud que personne (admin) n'est encore répondu à ton message.

Bonjour, si vous attendez une réponse des administrateurs d'OC sur le forum, vous pouvez attendre longtemps car l'équipe du site ne passe que très rarement sur le forum. Vous pouvez la contacter par mail à hello@openclassrooms.com

Est-ce que vous avez résolu votre problème ?

-
Edité par AliasDmc 18 janvier 2020 à 11:02:34

De mon côté j'ai ça et ça ne marche pas.

@function pastel($clr) { $hue:$clr; $sat:100%; $light:90%; $pastel:hsl ($hue,$sat,$light); @return $pastel; } @mixin hover-color($clr: pastel($color-primary)) { background-color:$clr; }

.btn {
  cursor: pointer;
  padding: 1.5rem 3rem;
  border-radius: 10rem;
  font-size: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  color: $color-accent;
  background: $color-primary;
      &:hover {
        @include hover-color($clr: pastel($color-primary));
      }
}

Bonjour MatthieuRebuffat;

Peux tu me fournir l'ensemble du code ?

Mais  déjà une piste qui va te déclencher l'erreur, supprime l'espace entre hsl et la parenthese:

$pastel:hsl ($hue,$sat,$light);
->
$pastel:hsl($hue,$sat,$light);

Gestion des couleur :
https://sass-lang.com/documentation/modules/color

-
Edité par AliasDmc 18 janvier 2020 à 12:45:45

Voici le code entier:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,900i');

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

}

* {

  box-sizing: border-box;

}

.container {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-evenly;

  flex-wrap: wrap;

}

$color-primary: #15DEA5;

$color-accent: #FFF;

@function pastel($clr) {

      $hue:$clr;

      $sat:50%;

      $light:90%;

      $pastel:hsl($hue,$sat,$light);

      @return $pastel;

}

@mixin hover-color($clr: pastel($color-primary)) {

  background-color:$clr;

}

.btn {

  cursor: pointer;

  padding: 1.5rem 3rem;

  border-radius: 10rem;

  font-size: 2rem;

  font-family: 'Montserrat', sans-serif;

  font-weight: 900;

  font-style: italic;

  color: $color-accent;

  background: $color-primary;

      &:hover {

        @include hover-color($clr: pastel($color-primary));

      }

}

Si je supprime l'espace entre hsl et ($hue...), j'obtiens un message d'erreur (que je ne peux pas copier) :

-
Edité par MatthieuRebuffat 18 janvier 2020 à 17:44:48

Bonjour MatthieuRebuffat;

Maintenant que tu as l'erreur qu'en déduisons nous :

D'abord $hue représente la valeur de la teinte de hsl (teinte, saturation, luminosité)

La teinte est un nombre entier comprit entre 0 et 360

Donc la définir à #15DEA5 n'est pas possible.

Il faut donc que tu trouves soit un moyen pour que $hue soit un nombre entier comprit entre 0 et 360.

Soit tu changes ta manière de gérer la couleur en utilisant la Gestion des couleur SASS (se qui me semble le mieux pour le moment de l'apprentissage ):
https://sass-lang.com/documentation/modules/color

-
Edité par AliasDmc 19 janvier 2020 à 10:20:25

Bonjour AliasDMC et Matthieu,

Merci pour vos messages. Je n'ai résolu que la moitié de mes problèmes.

J'ai résolu le problème de l'exercice grâce au message d'AliasDMC, c'était la hue qui posait problème :).

Par contre, je pense louper quelque chose au niveau des fonctions et de leur utilisation à travers le mixin. En effet, j'ai essayé d'appliquer le cours avec ce code qui devrait passer la couleur du texte en noir si la background-color est autre que noire et sinon en blanc si le fond est noir mais ça ne fonctionne pas : 

// V A R I A B L E S 
$black: #000;
$white: #fff;
$bg-color: $black; // background
$text-color: #ed159a; //fuschia // couleur du texte


// C O D E 
@function couleur-fond($bg-color)
{
   @if($bg-color == $black) 
  {
    @return $text-color == $white;
  }
  @else
  {
    @return $text-color == $black;
  } 
}

// mixin visant à changer la couleur du texte en fonction du fond d'écran
@mixin text-color-shift($bg-color: couleur-fond($bg-color))
{
  @if($bg-color == $black) 
  {
    $text-color: $white;
  }
  @else
  {
   $text-color: $black;
  }
}

body
{
 background-color: $bg-color;
 color: $text-color;
  @include text-color-shift;
}

En effet, mon code reste fuschia quelle que soit la couleur de mon background. Soit je n'appelle pas correctement la fonction dans mon mixin, soit mes conditions sont fausses mais je ne trouve pas d'où  vient mon erreur... 

Voyez-vous quelque chose d'anormal s'il vous plait ? Merci pour votre aide.

-
Edité par laure79 20 janvier 2020 à 4:19:32

Bonjour laure79,

Je suis pas forcement un expert en SASS mais voila comment je vois les choses

J'espère que cela te fera avancer

// V A R I A B L E S
$black: #000;
$white: #fff;
$bg-color: $black; // background
$text-color: #ed159a; //fuschia // couleur du texte
$default: #cccccc;

// C O D E
/*
* La fonction couleur-fond renvoie un boulean
* ( $text-color == $white ) donne soit true soit false 
* $black == $black => true
*/
@function couleur-fond($bg-color) {
  @if ($bg-color == $black) {
    @return $text-color == $white;
  } @else {
    @return $text-color ==  $black;
  }
}

// mixin visant à changer la couleur du texte en fonction du fond d'écran
/* 
* couleur-fond($bg-color) => false donc 
* $bgcolor = false par défaut
* quand tu fais un @include text-color-shift; tu prend la valeur par défaut
*/
@mixin text-color-shift($bg-color: couleur-fond($bg-color)) {
  /* $bg-color = #{$bg-color} */
  /* #{$bg-color} == #{$black} */
  /* #{bg-color == $black} */
  @if ($bg-color == $black) {
    /*  $text-color == $white */
    $text-color: $white;
  } @else {
    /*  passe ici  */
    $text-color: $black; 
  }
}
/* Cependant il faut que tu relises le cours car pour moi
* un @mixin est contient des propriétés Css
* tel que tu l'utilises c'est comme une fonction
* mais cela ne fonctionne pas car je pense que la porté des variables
* et locale (dans me mixin seulement à vérifier quand même)
*/

/* Je sais pas trop ce que tu essayes de faire mais je penses
* que cela doit être cela 
*/
@function couleur-fondA($bg-color) {
  @if ($bg-color == $black) {
    @return $white;
  }  
  @return $black;
}

@mixin text-color-shiftA( ) {
  color: couleur-fondA($bg-color) ;
}
body {
  @include text-color-shiftA; 
  background-color: $bg-color; 
}
// ou

@function couleur-fondB($bg-color) {
  @return $bg-color == $black;
}

@mixin text-color-shiftB($isDark: couleur-fondB($bg-color)) {
  @if ($isDark == true ) {
    color: $white;
  } @else{
    color: $black;
  }
}

body {
  @include text-color-shiftB; 
  background-color: $bg-color; 
}

Bonjour AliasDmc,

Merci pour ta réponse, j'ai regardé ce que tu m'as envoyé et je comprends nettement mieux à présent. Honnêtement, je ne trouvais pas clair du tout la fin de cette partie dans le cours, je ne comprenais notamment pas l'intérêt de faire une fonction et ensuite de reprendre son contenu dans le mixin... ,alors qu'il est constamment répété dans le cours, d'éviter les répétitions...

A présent, tout s'éclaire.

Merci !

J'ai complété mon code avec des @else if (non vu dans le cours) et je le joins au cas ou cela puisse être utile à d'autres personnes : 

// V A R I A B L E S 
$black: #000;
$white: #fff;
$bg-color: pink; // background
$text-color: #ed159a; //fuschia // couleur du texte
$pink: pink;
$blue: blue;
$green: green;
$beige: beige;


@function couleur-fond($bg-color) 
{
  @if($bg-color == $black) 
  {
    @return $white;
  }
  @else if($bg-color == $pink)
  {
    @return $blue;
  }
  @else if($bg-color == $green)
  {
    @return $beige;
  }
 @else
  {
  @return $black;
  }
}

@mixin color-shift($bg-color)
{
  color: couleur-fond($bg-color);
}

body
{
  background-color: $bg-color;
  @include color-shift($bg-color);
}

Merci également aux autres personnes qui ont essayé de m'aider. Bonne journée.

-
Edité par laure79 22 janvier 2020 à 6:42:02

Merci HugoHémon.

Merci HugoHémon.

@amicodeur Bonjour, pour dire merci inutile de déterrer un ancien sujet, vous avez la possibilité de cliquer sur les pouces levés des messages qui vous ont aidés.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

• soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
• soit de créer un nouveau sujet décrivant votre propre contexte
• ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.