Bonjour,
Je développe un site avec Visual Studio Code et SCSS et j'ai un script qui met en place les styles d'un menu vertical. J'ai notamment quatre variables $menuTxt, $menuBg, $menuHover et $menuActu.
Ces variables servent à définir les background et couleurs pour les choix de menu et ça marche parfaitement bien.
Où ça se corse, c'est quand je veux intégrer les options que sont
les thèmes light et dark qui sont repérés par les classes alternatives body.light et body.dark, et aussi
le fait que le site est consulté sur mobile ou desktop ce que repère html.mobile (et html:not(.mobile). Les valeurs sont initialisées dans quatre listes SCSS dont voici un extrait de celle qui correspond à desktop light :
J'ai donc écrit ce code placé en tête du module qui gère le fameux menu :
Le problème pour lequel je vous consulte est que, bien que la compil se passe sans erreurs, les contenus de mes variables ne sont pas modifiés après ce passage, et celles-ci contiennent toujours du rouge.
Or il y a forcément une alternative vraie pour html.mobile / html:not(.mobile), et idem pour body.light / body.dark, car HTML initialise body par <body class="light">
Et si je remplace tout ce code par :
(sans les selecteurs html:not(.mobile) { body.light { devant) mes variables sont parfaitement renseignées avec les couleurs attendues.
Mais évidemment tout l'intérêt du code initial est perdu.
Où est ma faute ? Avez-vous une piste ?
Merci de m'avoir lu jusque-là.
Goggi
Modifié par goggi (02 Jul 2025 - 05:30)
Je développe un site avec Visual Studio Code et SCSS et j'ai un script qui met en place les styles d'un menu vertical. J'ai notamment quatre variables $menuTxt, $menuBg, $menuHover et $menuActu.
Ces variables servent à définir les background et couleurs pour les choix de menu et ça marche parfaitement bien.
Où ça se corse, c'est quand je veux intégrer les options que sont
les thèmes light et dark qui sont repérés par les classes alternatives body.light et body.dark, et aussi
le fait que le site est consulté sur mobile ou desktop ce que repère html.mobile (et html:not(.mobile). Les valeurs sont initialisées dans quatre listes SCSS dont voici un extrait de celle qui correspond à desktop light :
$desktopLightMap: (
color: #336633, // Txte principal (vert foncé)
background: #ffffdd, // Fond général (jaune très pâle)
container: #fffff0, // fond de boîte légèrement plus clair
...
menuTxt: #df6, // texte menu
menuBg: #121, // fond menu si pas image
menuHover: #fc0, // survol
menuActu: yellow, // menu sélectionné
);
J'ai donc écrit ce code placé en tête du module qui gère le fameux menu :
// Initialisation des variables globales qui seront utilisées plus bas (initialisées à n'importe quelle couleur, puisqu'elles sont censées être modifiées par le code ci-dessous).
$menuTxt: red;
$menuBg: red;
$menuHover: red;
$menuActu: red;
// initialise les variables locales $menuTxt, $menuBg, $menuHover et $menuActu
// Vérifier si on est en mode "mobile" ou "desktop" en fonction de html.mobile
html.mobile {
// ici on est en mode mobile
body.light {
// Mode clair en mobile
$menuTxt: map-get($mobileLightMap, menuTxt);
$menuBg: map-get($mobileLightMap, menuBg);
$menuHover: map-get($mobileLightMap, menuHover);
$menuActu: map-get($mobileLightMap, menuActu);
}
body.dark {
// Mode sombre en mobile
$menuTxt: map-get($mobileDarkMap, menuTxt);
$menuBg: map-get($mobileDarkMap, menuBg);
$menuHover: map-get($mobileDarkMap, menuHover);
$menuActu: map-get($mobileDarkMap, menuActu);
}
}
html:not(.mobile) {
// Ici on est en mode desktop
body.light {
// Mode clair en desktop
$menuTxt: map-get($desktopLightMap, menuTxt);
$menuBg: map-get($desktopLightMap, menuBg);
$menuHover: map-get($desktopLightMap, menuHover);
$menuActu: map-get($desktopLightMap, menuActu);
}
body.dark {
// Mode sombre en desktop
$menuTxt: map-get($desktopDarkMap, menuTxt);
$menuBg: map-get($desktopDarkMap, menuBg);
$menuHover: map-get($desktopDarkMap, menuHover);
$menuActu: map-get($desktopDarkMap, menuActu);
}
}
Le problème pour lequel je vous consulte est que, bien que la compil se passe sans erreurs, les contenus de mes variables ne sont pas modifiés après ce passage, et celles-ci contiennent toujours du rouge.
Or il y a forcément une alternative vraie pour html.mobile / html:not(.mobile), et idem pour body.light / body.dark, car HTML initialise body par <body class="light">
Et si je remplace tout ce code par :
$menuTxt: map-get($desktopLightMap, menuTxt);
$menuBg: map-get($desktopLightMap, menuBg);
$menuHover: map-get($desktopLightMap, menuHover);
$menuActu: map-get($desktopLightMap, menuActu);
(sans les selecteurs html:not(.mobile) { body.light { devant) mes variables sont parfaitement renseignées avec les couleurs attendues.
Mais évidemment tout l'intérêt du code initial est perdu.
Où est ma faute ? Avez-vous une piste ?
Merci de m'avoir lu jusque-là.
Goggi
Modifié par goggi (02 Jul 2025 - 05:30)