boucle (loop) dans scss / sass

[woluweb]

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 !

[lomart]

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

%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/

[woluweb]

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 !

[lomart]

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.

[lomart]

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 !

[Eddy.vh]

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.

[lomart]

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 !

[Eddy.vh]

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 !

[lomart]

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

// 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 :

$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

[woluweb]

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).

$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%);
        }
    }
}

[lomart]

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]

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

[lomart]

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