Comment contrôler Sass Variable avec javascript

J'ai un fichier Sass qui est de la génération d'un fichier CSS. J'ai utilisé beaucoup de variables dans mon fichier sass pour la couleur de fond, taille de police, maintenant, je veux contrôler mon toutes les variables à l'aide de JavaScript.

Par exemple, dans le style.sass nous avons

$bg : #000;
$font-size: 12px;

Comment puis-je modifier ces valeurs à partir de JavaScript?

OriginalL'auteur Ankit | 2013-07-22

  1. 12

    Vous ne pouvez pas. SASS est un préprocesseur CSS, ce qui signifie que tous SASS des informations spécifiques disparaît quand vous compilez pour CSS.

    Grâce GJK.mais je veux changer mes variables avant de css génération. à l'instar de certains est en train de faire dans le bootstrap themeroller, de la même manière, je voulais thème de ma page web.
    Eh bien, je peux vous dire qu'il n'y a certainement pas de bibliothèque Javascript pré-faites pour manipuler les fichiers SASS. Vous allez avoir à faire côté serveur (via Node.js si vous souhaitez utiliser Javascript) à l'aide d'un bon vieux fichier IO.

    OriginalL'auteur GJK

  2. 2

    J'ai aussi besoin de cette fonctionnalité, voici ce qui a fonctionné pour moi:

    Avec JS vous pouvez définir une classe de corps, ex. .blue ou .default
    Maintenant, créez un ensemble de règles d'étendre à partir de, laquelle vous souhaitez définir:

    .default .themeColor {
  color: 'red';
}
.blue .themeColor {
  color: 'blue';
}

    Maintenant au lieu d'avoir color: $someColor dans votre fichier scss, l'utiliser comme ceci:

    .someClass {
   @extend .themeColor;
 }

    Maintenant, si votre organisme aura le default classe, la couleur à l'intérieur someClass sera rouge, et si l'organisme aura le blue classe de la couleur bleu.

    ne fonctionne pas avec le shadow dom ou shadow dom émulation (comme composant de style encapsulation dans angulaire)

    OriginalL'auteur Ziarno

  3. 1

    Si vous cherchez à faire ce que bootstrap faire (c'est à dire l'édition des champs de télécharger un thème).

    Vous auriez à:

    1. Les fichiers que vous souhaitez modifier
    2. Stocker ces variables en tant que chaîne de caractères, et l'utilisation .replace() pour rechercher et remplacer des variables
    3. De sortie de cette chaîne et de les compiler dans un fichier et ou la fermeture-éclair pour le téléchargement.

    Je serais personnellement le faire avec php.

    OriginalL'auteur Shannon Hochkins

  4. 1

    JavaScript s'exécute côté client (dans le navigateur web), tandis que le Sass est généré côté serveur, donc vous devez trouver un moyen de combler le fossé fossé. Une façon de le faire serait de mettre en place certains de style AJAX écoute pour envoyer des événements JavaScript sur votre serveur, et ensuite le serveur de modifier et de re-compiler votre style.sass fichier.

    Grâce katiek. mais j'ai entendu que, avec l'aide ok node.js nous pouvons le faire. [lien]npmjs.org/package/node-sass

    OriginalL'auteur KatieK

  5. 1

    De partager des données entre Sass et JavaScript en utilisant JSON.

    Voir la question relative à la https://stackoverflow.com/a/26507880/4127132

    OriginalL'auteur Chase Oliphant

  6. 1

    CSS

    :root {
  subTitleLeftMargin: 1.5vw;
}

.element {
  margin-left: var(--subTitleLeftMargin);
}

    JS ou TS

    document.documentElement.style.setProperty("--subTitleLeftMargin", "6vw");
    document.documentElement.style ne fonctionnerait pas de serveur-côté droit?
    Je ne le pense pas.

    OriginalL'auteur Krull