boucle (loop) dans scss / sass

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

  • boucle (loop) dans scss / sass

    Bonjour,

    Je voudrais faire une boucle dans un fichier scss / sass telle que celui, le but étant que les couleurs $blabla-dark et $toto-dark soient respectivement assignées aux Titres de body.blabla et body.toto :

    $blabla-dark: #376437
    $toto-dark: #16193B

    @each $maliste in blabla, toto {
    body.#{$maliste} {
    h1, h2, h3, h4, h5, h6 {
    color: #{$maliste}-dark;
    }
    }

    Mais visiblement "l'interpolation de variables" ne marche pas dans la boucle : #{$maliste}-dark est traduit par blabla-car et pas par la couleur/variable $blabla-dark.
    Quelqu'un connaît-il une solution alternative pour réaliser cette boucle pourtant simple ?

    Merci !
    Présentations : slides.woluweb.be, ...
    Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
    Coordonnées complètes : www.woluweb.be

  • #2
    Bonjour Marc,

    A mon avis, il n'est pas possible d'interpoler des valeurs de propriété en SASS.
    Regarde mon mémo : https://lomart.fr/extensions/20-scss...ison-scss-less

    Une méthode pour y arriver est de passer par une fonction extend
    Code:
    %blabla-dark {
      color :  #376437;
    }
    %toto-dark {
      color :  #16193B;
    }
    
    @mixin set-color($arg) {
        @extend %#{$arg}-dark;
    }
    
    
    @each $maliste in blabla, toto {
      body.#{$maliste} {
        h1, h2, h3, h4, h5, h6 {
         @include set-color($maliste);
        }
      }
    }
    Je ne sais pas si tu connais cet outil génial pour tester le scss : https://www.sassmeister.com/
    Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
    ---
    UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
    bgMax
    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire


    • #3
      Trop fort !

      Merci Loïc.
      J'approfondis ça lundi pour généraliser à mon vrai cas de figure, mais ceci marche déjà

      Merci aussi pour tes ressources (et je ne connaissais pas sassmeister.com non plus).
      En fait, c'est la 1e fois que j'utilise scss (pcq le projet s'y prête et que Helix Ultimate embarque maintenant scss).

      J'aurais trouvé dommage de ne pas arriver à faire de boucle comme ci-dessus... pcq sinon c'est à peine plus court que le css
      J'avais déjà cherché 2 heures hier et j'avais vu que de temps en temps qqun proposait les "placeholders" (%), mais je n'avais pas d'exemple concret pour tester.

      Bref, encore un tout grand merci !
      Seul truc : je ne pense pas que Helix Ultimate processe custom.scss tout seul, auquel cas il faut que je fasse un @import dans master.scss... avec comme csq qu'à chaque mise à jour de template je dois recorriger master.scss.

      Encore une dernière fois, merci Loïc pour tout !
      Présentations : slides.woluweb.be, ...
      Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
      Coordonnées complètes : www.woluweb.be

      Commentaire


      • #4
        Je n'ai pas encore testé helix ultimate, mais c'était prévu ce weekend. Il doit forcément prendre en compte un custom.scss
        En attendant, si tu veux forcer la compilation SCSS, j'ai adapté un compilateur pour Joomla : https://extensions.joomla.org/extens...scss-compiler/
        Il permet de surveiller et compiler des scss à plusieurs endroits. C'est assez pratique en mode développement.
        Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
        ---
        UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Je viens de regarder pour le custom.scss. Cela n'est pas possible : https://www.joomshaper.com/forums/ho...dd-custom-scss

          Donc il reste 2 solutions :
          - la tienne : ajouter un import dans scss/master.scss
          - la mienne : ajouter un fichier scss/custom.scss et faire la compilation avec mon plugin. Cela permet aussi de compiler des scss d'autres extensions

          Perso, je vais adopter la mienne. Comme cela, j'ai juste à penser de l'activer/désactiver pour gagner un peu de temps en mode production ... et encore !
          Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
          ---
          UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            J'utilise le scss-compiler de Loic pour compiler le custom.scss vers custom.css !
            Et je confirme que ça fonctionne parfaitement… Merci Loic pour ces extension pratiques.
            Cordialement.
            __
            Eddy !!!
            Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

            Commentaire


            • #7
              Merci Eddy pour ces encouragements.

              Quelques précisions, si on utilise mon scss-compiler :
              • helix ultimate utilise le même compilateur que mon plugin. Donc aucun risque d'interprétation différente.
              • helix ultimate n'utilise pas le système des partiels de SCSS. Cela oblige à :
                • conserver la compilation par son plugin system
                • ne pas mettre le custom.scss dans son dossier scss. J'ai créé un dossier scss-custom

              En conclusion, les paramètres de scss-compiler doivent être :
              Prise en charge du template par défaut
              Prise en charge template : non
              Prise en charge autres dossiers
              Dossier(s) SCSS : templates/shaper_helixultimate/scss-custom
              Dossier(s) CSS : templates/shaper_helixultimate/css

              Cette configuration permet de compiler d'autres extensions.
              Mais si on ne compile que Helix Ultimate, on peut utiliser ce réglage :
              Prise en charge du template par défaut
              Prise en charge template : oui
              Dossier SCSS : scss-custom
              Dossier CSS : css


              Espérons qu'ils permettront la prise en charge directe. Ce serait quand même plus facile !
              Dernière édition par lomart à 09/06/2018, 20h15
              Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
              ---
              UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                J'ai utilisé cette méthode.

                Prise en charge du template par défaut
                Prise en charge template : non
                Prise en charge autres dossiers
                Dossier(s) SCSS : templates/shaper_helixultimate/scss-custom
                Dossier(s) CSS : templates/shaper_helixultimate/css

                Allez, je pars en vacances, à plus tard !
                Cordialement.
                __
                Eddy !!!
                Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                Commentaire


                • #9
                  Bonnes vacances Eddy, quand à moi, je continue ma découverte de Ultimate.

                  L'utilisation de Bootstrap4 est vraiment minimale. Elle se réduit principalement à un fichier /templates/shaper_helixultimate/css/bootstrap.min.css. Aucune trace des sources SCSS, ni de compilation pour l'adapter.
                  Dans mon utilisation, la couleur cyan des badges infos jure avec le reste du template. Plutôt qu'une surcharge CSS, j'ai préféré prendre le problème à la source : modifier la couleur cyan de BS4.

                  Ma méthode :

                  Prérequis : mon plugin scss-compiler est installé et surveille le dossier /templates/shaper_helixultimate/scss-custom

                  1/ récupérer les fichiers scss de BS4 sur cette page https://getbootstrap.com/docs/4.0/ge...rted/download/
                  2/ copier le dossier scss du zip dans le dossier /templates/shaper_helixultimate/scss-custom, puis le renommer en bootstrap4 pour l'identifier
                  3/ créer un fichier /templates/shaper_helixultimate/scss-custom/bootstrap.min.scss avec le code suivant
                  Code:
                  // toutes les couleurs de base (avec en commentaire leur utilisation par $theme-colors)
                  $blue:        #006699;    // primary
                  $gray-600:    #666666;    // secondary
                  $green:        #006400;    // success
                  $cyan:      #0080ff;    // info
                  $yellow:     #ffc107;    // warning
                  $red:        #DC3545;    // danger
                  $gray-100:    #f8f8f8;    // light
                  $gray-800:    #383838;    // dark
                  
                  // appel compilation
                  @import "bootstrap4/bootstrap";
                  4/ afficher une page en frontend pour lancer la compilation. il peut-être nécessaire de rafraichir l'affichage pour voir l'effet du CSS.

                  Quelques explications :

                  - les couleurs de base de BS4 (primary, info, warning, ...) sont affectées indirectement dans la maps $theme-colors. BS4 ne définit pas la couleur pour info, mais utilise la couleur cyan. Pour avoir la même teinte dans toutes les utilisations du cyan, je modifie directement la couleur cyan. La définition se trouve à la ligne 46 de bootstrap4/_variables.scss :
                  Code:
                  $cyan: #17a2b8 !default;
                  L'important est le mot !default qui signifie que la valeur sera utilisée par défaut si elle n'est pas définie ailleurs. La première partie de bootstrap.min.scss définit les couleurs à utiliser.

                  - la dernière ligne (@import bootstrap4/bootstrap) va lancer la compilation du fichier principal bootstrap4/bootstrap.scss sous le nom bootstrap.min.css afin d'écraser le fichier appelé par Helix Ultimate.

                  Pour aller plus loin :

                  Cette méthode permet également de créer un fichier editor.css pour notre éditeur préféré.
                  Dans ce cas, il faut créer un fichier /templates/shaper_helixultimate/scss-custom/editor.scss avec uniquement les règles utiles. Les définitions de variables seront à déplacer dans un fichier _variables.scss qui sera importé au début des scss principaux.
                  Petit rappel, les fichiers SCSS dont le nom commence par un underscore sont des partiels. Il ne sont jamais compilé en css, mais uniquement importé dans le fichier principal. Attention, scss-compiler ne surveille pas les partiels, il faut forcer la compilation dans ses paramètres ou modifier légèrement le fichier principal qui l'utilise.

                  J'espère que ces quelques précisions et astuces aideront les découvreurs de ce fabuleux framework. N'hésitez pas à partager les vôtres

                  Mise à jour :
                  J'ai développé ma réponse sur mon site, en y ajoutant la possibilité de personnaliser les couleurs du preset par défaut d'ultimate : https://lomart.fr/trucs-et-astuces/1...alisation-scss
                  Dernière édition par lomart à 22/06/2018, 05h26
                  Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                  ---
                  UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    Chose promise, chose due, je vous reviens après avoir continué d'expérimenter tout ça.
                    (et merci pour toutes les ressources et infos Loïc ! )

                    Comme je disais, mon cas était encore un peu plus compliqué que le simple "color: $mavariable".
                    En fait, c'est pcq la plupart du temps je dois encore manipuler cette couleur par exemple (foncer, éclaircir, rendre transparent à X%, ...).

                    Du coup, avec le système de placeholder expliqué ci-dessus, je calais (ou j'aurais dû multiplier les placeholders pour la couleur main, dark et light et pour chacune de mes institutions, ce qui aurait été lourd).
                    C'est alors que j'ai commencé à creuser une autre piste: le mapping, càd l'utilisation d'un tableau.
                    Ce qui est sympa dans cette utilisation, c'est que c'est sans doute plus lisible pour un tiers (p.ex. un client averti, n'y connaissant cependant rien à scss).

                    Code:
                    $north-dark: #58594F;
                    $south-dark: #376437;
                    $west-dark: #16193B;
                    $east-dark: #FF5F4A;
                    
                    /* mapping with an array */
                    $institution-dark: (
                        north: $north-dark,
                        south: $south-dark,
                        west: $west-dark,
                        east: $east-dark
                    );
                    
                    @each $institution, $color in $institution-dark {
                        body.#{$institution} {
                            h1, h2, h3, h4, h5, h6 {
                                color: darken($color,10%);
                            }
                        }
                    }
                    Présentations : slides.woluweb.be, ...
                    Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                    Coordonnées complètes : www.woluweb.be

                    Commentaire


                    • #11
                      Ouais, c'est évident que la réponse au problème posé de cette façon est une map.
                      Je ne voyais pas trop où tu voulais aller. Maintenant, j'ai compris!
                      woluweb likes this.
                      Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                      ---
                      UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                      bgMax
                      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                      Commentaire


                      • #12
                        Les Placeholders répondaient à ma question initiale, et c'est une belle technique.
                        J'aurai appris deux choses en deux jours :
                        1. les placeholders
                        2. les maps
                        Je partais de rien en scss, j'ai déjà l'impression d'avoir avalé la potion magique rien qu'avec ces deux techniqes
                        Présentations : slides.woluweb.be, ...
                        Custom Fields / Automatiser la restauration de ses sites / Lightning Talks / Toutes les nouveautés au fil des sous-versions de Joomla! 3.x / Devenir un testeur Joomla / Akeeba Backup & Amazon S3 / Acymailing & ElasticEmail / ...
                        Coordonnées complètes : www.woluweb.be

                        Commentaire


                        • #13
                          Je partais de rien en scss, j'ai déjà l'impression d'avoir avalé la potion magique rien qu'avec ces deux techniqes
                          et tu maitrises aussi les interpolations (body.#{$maliste}) et les boucles (@each)
                          avec les valeurs par !default, tu a les points forts de SASS
                          Un message d’erreur sur votre site Joomla, consultez la base de connaissance https://kb.joomla.fr
                          ---
                          UP, un plugin "couteau suisse" à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          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
                          Travaille ...
                          X