28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mauvaise compilation d'une variable sass

Bonjour
J'ai un petit problème de compilation sass.

dans une variable j'ai mis une série de nom
$cam2017: link-4g, link-4gv, link-s, link-s-v, link-evo, link-evo-v, solar, force-11d, force-10, tiny-wbf;


j'appelle la variable un peu plus bas dans le code, comme suit:

&.#{$cam2017}  {
	.texte {
		article {
			min-height: 400px;
		}
	}
	...
	...
	...
	...
}


Mais lors de la compilation, ça me donne un truc du genre:

#cameras.link-4g .texte article, 
#cameras link-4gv .texte article,
 #cameras link-s .texte article, 
#cameras link-s-v .texte article, 
#cameras link-evo .texte article, 
#cameras link-evo-v .texte article, 
#cameras solar .texte article, 
#cameras force-11d .texte article, 
#cameras force-10 .texte article, 
#cameras tiny-wbf .texte article {
		min-height: 400px;
}


autrement dit, il n'y a que le premier élément de la variable qui est compiler correctement. Pourtant je n'ais aucun message d'erreur lors de la compilation.

Quelqu'un comprend pourquoi ça fait ça???
Modifié par juliesunset (24 Feb 2017 - 15:04)
juliesunset a écrit :
Autrement dit, il n'y a que le premier élément de la variable qui est compilé correctement.

"Correctement" ? Pourtant tout semble correct, mais il semble évident que ce n'est pas le résultat auquel vous vous attendiez...

EDIT : autant pour moi, je n'avais pas vu de différence entre la première ligne et les autres à la première lecture du code...
Modifié par Olivier C (23 Feb 2017 - 21:23)
Administrateur
Bonjour,

j'avais bien vu les espaces mais pas l'absence de point... Smiley biggol

Ta variable est une liste en Sass. Que ce soit séparé par des espaces ou des virgules d'ailleurs. Une rapide recherche et on tombe sur un article d'Hugo Giraudel (comme c'est pas surprenant Smiley lol ) http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

Aidé de ses exemples et de la doc de Sass, voici une boucle qui permet de créer une variable similaire à la tienne mais avec un point devant chaque nom de classe
$cam2017: link-4g, link-4gv, link-s, link-s-v, link-evo, link-evo-v, solar, force-11d, force-10, tiny-wbf;
$selector: (); // Liste vide

// On recrée la liste mais non sans avoir concaténé un point devant chaque item.
// Et les items sont séparés par une virgule (comma), pas un espace (space)
@each $sel in $cam2017 {
  $selector: append($selector, '.' + $sel, comma);
}

#cameras {
  &#{$selector} {
  	.texte {
  		article {
  			min-height: 400px;
  		}
  	}
  }
}


Testé dans Sassmeister, ça fonctionne Smiley smile
Administrateur
HS : ça fait un long sélecteur tout de même ; ajouter côté serveur une classe sur chaque article genre article.cam-2017 quand l'élément article a pour parent l'un de ces appareils raccourcirait pas mal la CSS résultante Smiley cligne
Merci! je vais essayer ça!

Effectivement, c'est une assé gros sélecteur... pour l'instant je ne vois pas trop comment ajouter une classe unique pour les produits sélectionné. c'est 10 produits sur plus de 300 quand même... Pour ce faire il faut que je crée une variable php en tout début de page. Pour l'instant ça ne semble pas fonctionner, mais j'y travaille.
Administrateur
Spam nettoyé Smiley baille (spammeur qui cite un message et y ajoute son lien sans aucun rapport avec le schmilblick + message quelconque un peu générique)
Sujet clos
Aller à