Je suis en train de mettre en œuvre le style du site Web.
Pour des raisons de support hérité, je dois prendre en charge IE11, au moins pendant un certain temps. Pour des raisons de flux de travail et de santé mentale, je souhaite utiliser des variables CSS autant que possible.
J'ai étudié cette solution et elle génère quelque chose qui fonctionne, mais qui est plutôt verbeux à utiliser.
Mon objectif est de me retrouver avec une valeur codée en dur qui est immédiatement remplacée par une variable CSS. De cette façon, je peux ajouter un thème par défaut pour tout le monde et ajouter un thème différent (comme le mode sombre) pour les navigateurs prenant en charge les variables CSS. Je n’ai évidemment pas besoin d’écrire tout cela moi-même.
Donc mon idée est que je pourrais écrire quelque chose comme ceci :
$foo {...?}
:root {
--foo: red;
}
:root.dark {
--foo: black;
}
p {
color: $foo;
}
Il se traduit par
:root {
--foo: red;
}
:root.dark {
--foo: black;
}
p {
color: red;
color: var(--foo);
}
Cela peut-il être réalisé en utilisant scss ? Je ne veux pas gonfler ce projet en ajoutant des modules npm aléatoires ou d'autres compilateurs et transpilateurs tiers.
Je sais qu'il est possible d'ajouter un polyfill pour IE11 pour ajouter la prise en charge des variables CSS, mais la plupart de celles que j'ai trouvées jusqu'à présent ont une forme de limitation malheureuse (en plus, ce sont du code tiers que je préfère) À éviter si possible). C'est la solution que je pourrais choisir s'il n'y a pas de bonne solution utilisant SCSS.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Voici des solutions rapides que vous souhaiterez peut-être améliorer :
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);@each $color, $value in $colors { :root { --#{$color}: #{$value}; } }J'ai décidé de créer un mixin qui prend 2 paramètres, la propriété css et la couleur souhaitée.
@mixin propertyPlusColorValue($property, $color) { #{$property}: map.get($colors, $color); #{$property}: var(--#{$color}); }.foobar { @include propertyPlusColorValue(color, "blue"); @include propertyPlusColorValue(background-color, "red") }Code complet :
@use "sass:map"; $colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00); @each $color, $value in $colors { :root { --#{$color}: #{$value}; } } @mixin propertyPlusColorValue($property, $color) { #{$property}: map.get($colors, $color); #{$property}: var(--#{$color}); } .foobar { @include propertyPlusColorValue(color, "blue"); @include propertyPlusColorValue(background-color, "red") }