web-dev-qa-db-fra.com

Comment remplacer les variables SCSS lors de la compilation en CSS

J'essaie d'utiliser le thème jqtouch qui est basé sur SASS et COMPASS. J'ai un fichier custom.scss avec le code le plus simple, une importation et une variable à écraser:

@import 'jqtouch';

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

Lorsque je compile maintenant le fichier scss en css, il va simplement générer le css jqtouch avec mon nom de fichier. La spécification des couleurs est nulle part, bien que la variable soit définitivement correcte selon la documentation ( Guide officiel ) et dans le fichier jqtouch.scss, que j'importe pour la personnalisation.

J'utilise Sass 3.2.9 et Compass 0.12.2 sur une machine Windows.

Je l'ai essayé avec plus de variables et différentes importations de fichiers, mais le résultat est toujours que mes valeurs de remplacement ne sont pas incorporées.

Le fichier de configuration Ruby pour la boussole ne semble pas suspect.

Quelqu'un a-t-il une idée de ce qui ne va pas dans le processus afin que mes valeurs de remplacement soient ignorées?

sasscompass-sassjqtouch
51
bouscher

Vous définissez la couleur après elle a déjà été utilisée. Fondamentalement, ce que vous essayez de faire est le suivant:

$color: red;

.foo {
    background: $color;
}

$color: green;

Selon la façon dont jqtouch est écrit, vous ne pourrez peut-être pas du tout modifier les couleurs. Vous devez définir les variables par défaut afin de les écraser à l'avance:

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
    background: $color; // color is green
}

Votre code doit donc être écrit comme tel:

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

@import 'jqtouch';
87
cimmanon