Dynamique Sass Variables

Est-il possible que je peux configurer ma couleur variables en fonction de la classe est sur l'élément html? Ou de toute autre manière à atteindre ce même objectif?

html {

  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;
  }

}
  • Vous pouvez utiliser de MOINS, ce qui peut être mis en place pour compiler côté client et fonctionne de manière similaire. Cela peut avoir des implications sur les performances, cependant. lesscss.org
  • ce que vous avez fait pour résoudre ce problème? Je suis coincé avec la même question.
InformationsquelleAutor colmtuite | 2013-01-27
  1. 19

    C'est la base de la thématisation. Vous souhaitez utiliser un mixin ou d'inclure de multiples thèmes dans un seul fichier CSS. Voici comment vous pouvez aller à ce sujet à l'aide comprend:

    _theme.scss

    section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

    principal.scss

    html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

    Vous pourriez tout aussi bien faire un mixin qui prend 3 couleurs comme arguments à utiliser à la place de l'include:

    @mixin theme($accent, $base, $flat) {
    //.. do stuff ..
}
    InformationsquelleAutor cimmanon
  2. 4

    Malheureusement, Sass/Scss fichiers doivent obtenir compilés dans Css fichiers, afin d'être soutenu dans votre navigateur web.

    Depuis Css fichiers ne prennent pas en charge les variables, vous pouvez uniquement définir des variables à valeur dans le Scss modèle, parce que le Sass compilateur remplacera le var. (dans chaque position, le var. a été utilisé), avec la valeur donnée.

    Cela signifie qu'il n'aide pas à changer la couleur de la variable, en fonction de ce que la classe est incluse dans le Html, car le Css fichier ne contiennent pas de variables.

    La seule façon pour vous de faire une telle chose, est par:

    1. la lecture de la Html fichier pour savoir ce que la classe a été utilisé,
    2. que le changement de la Scss les variables de modèle à la couleur juste valeur
    3. et la compilation de la Scss modèle dans une Css fichier
    • Ouais, le problème c'est que j'ai besoin de ce travail. Est il n'y a absolument aucun moyen? Même avec JS?
    • Oh, je suis désolé. j'ai oublié. Bien sûr, vous pouvez utiliser JavaScript pour faire ce genre de travail, mais qu'il n'a pas d'importance si u utilisation Scss réguliers ou CSS. attendez, je vais vous poster comment le faire avec JS. 🙂
    • Jamais l'esprit, il suffit d'utiliser le "Moins" de la chose. il semble plus facile. 🙂
    • Je pense que je préfère la JS option, si vous avez le temps? L'ensemble de mon projet utilise Sass, ne veulent pas vraiment à obtenir en Moins.
    • Bien sûr, permet de voir, ce que je peux faire
    InformationsquelleAutor T.Lange
  3. 0

    Si vous souhaitez utiliser le JavaScript, vous pouvez le faire:

    • Vous aurez besoin d'un élément HTML avec un Id et une Class (celui qui décide, à ce que la couleur à utiliser).

      ...

    • Suivante, vous devez ajouter un peu de JavaSript

      var CurrentColor = document.getElementById("Cible").className;

      si (CurrentColor == "sunrise")

      {
      document.exampleTagg.style.exampleProperty = "#37CCBD";
      }

      else if (CurrentColor == "clair de lune")

      {
      document.exampleTagg.style.exampleProperty = "#18c";
      }

    (la première ligne déclare une variable qui contient la valeur de notre exampleTagg élément (l'un avec la "Cible" id), alors la si la déclaration de trouver le nom de notre classe (lever du soleil ou de la lune) et la dernière, nous allons changer l'arrière plan de notre exampleTagg à la couleur que nous aimons)

    Utiliser cet exemple pour vos propres besoins, remplacer le exampleTagg avec certains réel tagg et modifier le exampleProperty à un Css valide de propriété.

    Avis, que vous n'aurez pas besoin Scss pour cette tâche (u pouvez toujours l'utiliser), parce que JavaScript aura accès à votre compilé le fichier Css.

    • Ups, les "..." devrait être remplacé par <exampleTagg id="Cible" class="lever de soleil">...</exampleTagg>
    • J'ai mal compris. Je pensais que je pouvais utiliser JS pour modifier le Sass variable. Ces variables auront lieu dans des centaines d'endroits dans mon application. Il n'est pas possible de les modifier individuellement. J'ai besoin d'un moyen pour accéder à la Sass variables et de les modifier. Est-ce complètement impossible, par n'importe quelle méthode?
    • Uff, eh bien, je dirais que oui, acceptez-vous utiliser ce lesscss.org chose.
    • Ok cool, je vais donner un coup de feu. Merci pour l'effort 🙂
    • Oh, si tu vas utiliser ce Lesscss chose, u doit accepter l'autre réponse, car elle offre à la "meilleure" réponse à la question. mais merci pour l'acceptation de ma réponse. 🙂 (je pense que ce serait injuste)
    InformationsquelleAutor T.Lange