Des @mixin ne sont pas prit en compte

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • lomart
    a répondu
    J'imagine que je vide aussi le fichier css ?
    Il va se vider tout seul à la prochaine compilation

    Laisser un commentaire:


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

    Laisser un commentaire:


  • lomart
    a répondu
    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é

    Laisser un commentaire:


  • schtroumph
    a répondu
    Envoyé par lomart Voir le message
    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 :

    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.

    Envoyé par lomart Voir le message
    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 .

    Laisser un commentaire:


  • lomart
    a répondu
    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

    Laisser un commentaire:


  • schtroumph
    a répondu
    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 :

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

    Code:
    @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. :

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

    Code:
    $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 .

    Laisser un commentaire:


  • lomart
    a répondu
    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
    Cliquez sur l'image pour l'afficher en taille normale

Nom : scss-map.png 
Affichages : 45 
Taille : 3,9 Ko 
ID : 2039834

    Laisser un commentaire:


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

    Code:
    .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 :

    Code:
    .paragraphe-01 {
        margin: 10px;
        padding: 20px;
    }
    
    .paragraphe-02 {
        margin: 10px;
        padding: 20px;
    }
    Alors qu'avec @mixin il est avec les autres propriétés.

    Laisser un commentaire:


  • lomart
    a répondu
    Envoyé par schtroumph Voir le message
    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

    Laisser un commentaire:


  • schtroumph
    a répondu
    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.

    Laisser un commentaire:


  • lomart
    a répondu
    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 :
    Code:
    @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);}

    Laisser un commentaire:


  • schtroumph
    a répondu
    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 :

    Code:
    $violet-a:#9b02a8;
    
    @mixin violet-a {
        background-color:$violet-a;
        color:#fff;
    }
    
    .texte-01 {@include violet-a;}
    Ça marche bien.

    Laisser un commentaire:


  • lomart
    a répondu
    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 :
    Code:
    $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

    Laisser un commentaire:


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

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

    Code:
    @mixin violet-a {
        background-color:$violet-a;
        color:#fff;
    }
    Puis tous les :

    Code:
    @extend .violet-a;
    en :

    Code:
    @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.

    Laisser un commentaire:


  • schtroumph
    a répondu
    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 :

    Cliquez sur l'image pour l'afficher en taille normale

Nom : 2022-05-14 10_17_50-Plug-ins _ System - scssCompiler - Site de Base - Joomla 03 - Administration.png 
Affichages : 57 
Taille : 102,6 Ko 
ID : 2039731
    Fichiers joints

    Laisser un commentaire:

Annonce

Réduire
1 sur 2 < >

C'est [Réglé] et on n'en parle plus ?

A quoi ça sert ?
La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
Comment ajouter la mention [Réglé] à votre discussion ?
1 - Aller sur votre discussion et éditer votre premier message :


2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].


4 - Et voilà… votre discussion est désormais identifiée comme réglée.

2 sur 2 < >

Assistance au forum - Outil de publication d'infos de votre site

Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

UTILISER À VOS PROPRES RISQUES :
L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

Problèmes connus :
FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

Installation :

1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

Archive zip : https://github.com/AFUJ/FPA/zipball/master

2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
et remplacer www. votresite .com par votre nom de domaine


Exemples:
Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/
Pour executer le script: http://www..com/fpa-fr.php

Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/cms/
Pour executer le script: http://www..com/cms/fpa-fr.php

En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
Voir plus
Voir moins

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X