Des @mixin ne sont pas prit en compte

[lomart]

J'imagine que je vide aussi le fichier css ?

Il va se vider tout seul à la prochaine compilation

[schtroumph]

J'avais pas du tout compris comme ça . J'imagine que je vide aussi le fichier css ?

[lomart]

Le seule phrase que tu n'as pas reprise de mon post et qui est la plus importante :

Le principe :
on fait simple puis on complique en compilant au fur et à mesure

Et pas l'inverse
Tu repars de fichiers vides et tu ajoutes petit à petit tes règles ... en compilant

La méthode, je commente-de-commente, c'est le mal de tête assuré

[schtroumph]

Parce qu'il n'y a pas d'import, donc l'erreur est à ce niveau

C'est les @mixin et variables presentes dans trois nouveaux fichiers.

J'ai continué à commenter toutes les variables qui avaient une erreur et j'ai remarqué que c'est celles qui sont dans les fichiers _typos.scss et _couleurs.scss. J'avais créé ces deux fichiers et déplacé leurs contenus respectifs depuis _declarations.scss.

J'ai aussi un fichier _flexicontent.scss que je n'avais pas encore remplis. J'ai donc déplacé le code concernant du code Flexi, de _protostar.scss vers _flexicontent.scss. Et dedans il y a ce code :

#flexicontent ul.introblock {
margin:5px;
padding:25px;
background-color:$gris-d;
@extend %bordure-verte;
}

À partir de ce moment j'ai eux une erreur pour background-color:$gris-d;. J'ai déplacé uniquement le code ci-dessus dans _protostar.scss. Et là plus de message d'erreur. Je l'ai déplacé à nouveau de _protostar.scss vers _flexicontent.scss et à nouveau l'erreur.

J'ai ajouté du code dans _typos.scss et j'ai le message d'erreur.

Ces trois nouveaux fichiers sont appelés dans user.scss.

Dès qu'une erreur survient, on en cherche la cause

Je veux bien, mais c'est justement que je n'arrive pas à voir d'où ça peux venir .

[lomart]

Bonjour,

Le principe :
on fait simple puis on complique en compilant au fur et à mesure
Dès qu'une erreur survient, on en cherche la cause

dans sassmeister.com et... il n'y a pas d'erreur.

Parce qu'il n'y a pas d'import, donc l'erreur est à ce niveau

[schtroumph]

Ah oui c'est vrais ! J'ai découvert cette fonction il n'y a pas longtemps et je l'avais zappé . J'ai donc (re)mis à jour mes fichiers en remettant les @extend. Sauf pour certain pour lesquelles je garde @mixin.

Mais j'ai toujours ce message d'erreur :

Lors de la compilation du fichier C:\laragon\www\site-de-base-j3\templates\protostar-perso\scss\user.scss
L'erreur détectée est: Undefined mixin violet-a-rgba: templates\protostar-perso\scss/_pages.scss on line 21, at column 2 Call Stack: #0 import templates\protostar-perso\scss/_pages.scss (unknown file) on line 6

Voici le code dans lequel se trouve la variable :

.paragraphe {
margin:20px auto;
padding:10px;
width:90%;
border:#000 2px solid;
@include violet-a-rgba;
}

Le @include violet-a-rgba; correspond a :

@mixin violet-a-rgba($violet-a-transparence:1) {
background-color:rgba(155,2,168,($violet-a-transparence));
}

Qui est dans _couleur.scss.

Mais si je commente @include violet-a-rgba; j'ai le même message d'erreur. Mais cette fois avec "...Undefined variable $paragraphe-coul-fond..." toujours du fichier _page.scss. :

.bfClearfix {
    background-color:$paragraphe-coul-fond;
    margin:10px;
    border-radius:10px;
}

Le $paragraphe-coul-fond correspond à :

$paragraphe-coul-fond:#fff;

du fichier _typo.scss.

Si je commente aussi background-color:$paragraphe-coul-fond; j'ai à nouveau un message d'erreur.

A chaque fois je commente la variable qui pose probleme et j'ai un nouveau message d'erreur. J'ai testé plusieurs codes avec un message d'erreur dans sassmeister.com et... il n'y as pas d'erreur.

Je désespère .

[lomart]

Alors qu'avec @mixin il est avec les autres propriétés.

Tu vas voir le CSS ?

Le plugin SCSS-compiler génère une map durant la compilation. Ce qui permet de savoir, dans l'inspecteur de code, où se trouve la ligne du SCSS à l'origine du CSS. C'est cela le plus utile. La version compilée, on s'en fout

[schtroumph]

Je me suis très mal exprimé lol . Pour expliquer ce que je voulais dire le mieux c'est avec un exemple :

.paragraphe-02, .paragraphe-01 {
  margin: 10px;
}
.paragraphe-01 {padding: 20px;}

.paragraphe-02 {padding: 20px;}

Avec @extend le margin n'est pas avec les propriétés de chacune des deux class, paragraphe-01 et paragraphe-02 :

.paragraphe-01 {
    margin: 10px;
    padding: 20px;
}

.paragraphe-02 {
    margin: 10px;
    padding: 20px;
}

Alors qu'avec @mixin il est avec les autres propriétés.

[lomart]

Avant j'utilisais @extend mais ça n'ajoute pas le code dans la class mais "en dehors". Or visuellement je préfère voir mon code dans la class dans laquelle il doit être.

Ca n'ajoute pas en dehors, mais ajoute le sélecteur dans la règle reprise.
Après chacun fait comme il veut. Mais le CSS et encore plus le SCSS demande de la rigueur

[schtroumph]

Avant j'utilisais @extend mais ça n'ajoute pas le code dans la class mais "en dehors". Or visuellement je préfère voir mon code dans la class dans laquelle il doit être.

[lomart]

Tu n'avais pas défini la variable $violet-a et ton mixin n'était attribué à aucun sélecteur. C'est donc normal qu'il ne retourne rien sans trouver d'erreur
Je ne vois pas l'utilité de ton mixin, qui est normalement fait pour faire des calculs
Pour exemple :

@mixin bgContraste($color, $clair:white, $fonce:black) {
  background-color:$color;
  @if lightness($color)<50% {
    color: $clair;
  } @else {
    color: $fonce;
  }
}

$violet-a : purple;
.texte-01 {@include bgContraste($violet-a);}
.texte-02 {@include bgContraste(yellow);}

[schtroumph]

Je n'arrive pas à voir où j'ai fait une erreur dans ma syntaxe. En utilisant l'outil que tu ma passé (merci pour le lien ) et avec ce code :

$violet-a:#9b02a8;

@mixin violet-a {
    background-color:$violet-a;
    color:#fff;
}

.texte-01 {@include violet-a;}

Ça marche bien.

[lomart]

Bonjour,

Ce n'est pas un problème avec mon plugin, la syntaxe SCSS ne va pas

Essaie sur ce site (https://www.sassmeister.com/) le code suivant :

$violet-a : purple;

.violet-a {
background-color:$violet-a;
color:#fff;
}

@mixin violet-a {
background-color:$violet-a;
color:#fff;
}

.foo {@include violet-a}

// la classe foo2 est ajoutée à violet-a
.foo2 {
@extend .violet-a;
color:red;
}

J'ai repris ton exemple en le corrigeant et en l'adaptant

Ce site est génial pour apprendre et tester le SCSS.
et doit être utilisé dès que l'on ne comprend pas un truc

[schtroumph]

J'ai fais une installation (en local) d'une sauvegarde du site. Ensuite j'ai simplement remplacé ce code :

.violet-a {
    background-color:$violet-a;
    color:#fff;
}

par :

@mixin violet-a {
    background-color:$violet-a;
    color:#fff;
}

Puis tous les :

@extend .violet-a;

en :

@include violet-a;

et j'ai eu le message d'erreur. En fait la mise a jour des fichiers n'est pas prise en compte. Même si je vide le cache.

[schtroumph]

Bon ben le problème est revenu (comme j'avais commencé à faire des petites modifs au niveau de l'organisation de mes scss j'ai mis à jour l'installation du lien de mon premier message).

Dans le fichier user.scss j'ai commenté les lignes les unes après les autres et j'ai remarqué que plusieurs fichiers scss ne sont pas trouvés dans templates/protostar-perso/scss, alors qu'ils sont présents. Et le nom de ces fichiers est le même dans le user.scss.

Voici les réglages de mon scssCompiler 2.7 :