[Résolu] Communication entre sass et jquery

Bonjour,

Je souhaite que lorsque je recharge mon site la couleur $mainColor (j'utilise sass) soit choisi en aléatoire parmi 3 couleurs. Pour cela j'ai 2 pistes :

1-utiliser jquery ainsi :

var mainColorList = ['rgba(221,69,27,1.0)', 'rgba(0,145,137,1)', 'rgba(160,67,99,1);'];
var randomColor = mainColorList[Math.floor(Math.random()*mainColorList.length)];
$(function() {
    $('.cadre').css({
        background: randomColor
    });
    $('section.main h2').css({
    	color: randomColor
    })
});

ça fonctionne mais le désavantage est que je doit sélectionner chaque élément qui aura la mainColor.

2-Je préférerais me servir de cette variable sass $mainColor pour que ça soit elle qui prenne la valeur aléatoire. J'ai alors trouvé ce tuto : http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json mais je suis coincée puisque j'ai l'erreur suivante sur ma page, lorsque je souhaite importer le fichier .json :

error: File to import not found or unreadable: mainColor.json
Load paths:
   Compass::SpriteImporter
   /url de mon dossier sass/
   /url gems/compass-core-1.0.3/stylesheets
...

Est-ce que quelqu'un qui aurait déjà utilisé sass-json-vars pourrait me guider ? Ou y-a-t'il une méthode plus simple ?

Je vous remercie
Modifié par n0wmi (15 Apr 2015 - 13:25)

Bonjour,


Sass c'est un préprocesseur qui génère du css, normalement je ne t’apprends rien là.
Du coup dans ta solution 2 tu voudrais qu'à chaque visite tu modifies une variable sass ce qui implique de devoir recompiler ton css à la volée sur ton serveur à chaque visite ? Je sais même pas si c'est réalisable...! En tout cas je ne pense pas que ce soit une option a prendre en compte !

La bonne solution c'est la 1. En javascript (et meme pas besoin de jquery si tu ne l'utilise pas ailleurs).

Pour simplifier un peu ton Js tu peux aussi préparer un peu le terrai au niveau du HTML en posant des classes communes à plusieurs éléments. Par ex : une classe "randomColorText" pour le texte une "randomColorBg" pour les backrgound-color etc.

Ensuite dans ton js t'as "juste" a chopper tout les éléments qui on cette classe et a mettre une couleur random.

Je pense que c'est le plus simple.

// Une petite variante, tu pré-écris tes classes dans le css (ex : "randomColorTextRed{color:red;}" etc.) et en js tu set juste des classes.

Bonjour,

ça revient à avoir 3 thèmes CSS possibles mais laisser JS tirer au sort lequel s'appliquera.
Tu peux préparer le terrain comme l'explique _laurent mais il y a des variantes.

Par exemple en JS tu tires au sort 1 nombre entre 1 et 3 et tu appliques sur un parent (body) la classe .theme{1..3}
Ensuite dans tes CSS enfin Sass tout est prêt pour styler les éléments qu'il faut :
.theme1 .main h2 { color: $cTheme1; }
.theme2 .main h2 { color: $cTheme2; }
.theme3 .main h2 { color: $cTheme3; }

Ou bien tu ajoutes une classe .colorRandom sur ton h2 et une classe .bgRandom sur .cadre puis en CSS toujours le même truc :
.theme1 .main .cRandom { color: $cTheme1; }
.theme2 .main .cRandom { color: $cTheme2; }
.theme3 .main .cRandom { color: $cTheme3; }
.theme1 .main .bgRandom { background-color: $cTheme1; }
.theme2 .main .bgRandom { background-color: $cTheme2; }
.theme3 .main .bgRandom { background-color: $cTheme3; }

La partie JS reste simplissime (1 random, 1 classe) et tu contrôles le style depuis Sass/CSS (avec des classes HTML à la OOCSS) ce qui est plutôt le bon endroit pour ça.
Nan en fait la partie JS peut se faire côté serveur : à chaque appel, PHP ou autre langage serveur tire un nombre au hasard et génère le code HTML avec la classe sur body qui va bien. Si tu as du cache serveur, il faut 3 exemplaires de la page sinon ça va pas fonctionner

Felipe a écrit :
Par exemple en JS tu tires au sort 1 nombre entre 1 et 3 et tu appliques sur un parent (body) la classe .theme{1..3}
Ensuite dans tes CSS enfin Sass tout est prêt pour styler les éléments qu'il faut :
.theme1 .main h2 { color: $cTheme1; }
.theme2 .main h2 { color: $cTheme2; }
.theme3 .main h2 { color: $cTheme3; }

Rah je savais bien que j'avais zappé un truc. J'y avait réfléchi en plus pour des interfaces dont la couleur est personnalisable.
+1000 pour Felipe et cette solution. Simplicité & efficacité.

Merci à vous deux
J'utilise la méthode .theme1 .main .cRandom { color: $cTheme1; } ect... parfait !
Modifié par n0wmi (16 Apr 2015 - 11:41)