Générez des valeurs par défaut et des variables CSS à l'aide de SCSS

Question

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.

Answer 1

Voici des solutions rapides que vous souhaiterez peut-être améliorer :

1. Définissez la carte en utilisant toutes les couleurs :

$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);

2. Parcourez les cartes pour créer des propriétés CSS personnalisées :

@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}

3. Créez un mixin pour afficher la valeur de la somme de secours.
   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});
}

4. Ensuite, vous pouvez l'utiliser comme ceci :

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