[Résolu] Variables css

Bonjour,
Pour créer une typographie responsive j'utilise des variables css.. Et ça fonctionne sauf dans un cas particulier.
Dans ma dernière requete, je souhaite que si on passe en mode article ( exemple d'un post sur un blog lorsqu'on fait lire la suite) la typographie soit différente.
A cet effet j'ai mis une classe mode-article sur le body. Mais ça ne fonctionne pas completement : la modication de la line-height est prise en compte mais pas celle de la font-size.

:root {
	/* coefficient pour la font-size de base : 16px */
	--fs: 1;
     /* line_height  */					
	--lh: 1.28;	
	/* spacing unit de base = nombre magique */
	--mnb: calc(var(--fs) * var(--lh) * 1rem);	
	/* font_size_base : body */
	--fs_b: calc(var(--fs) * 1rem);
}
@media screen and (min-width: 768px){
	:root {
		--fs: 1.05; 	    /* 16.8px */
		--lh: 1.36;     /* mnb = 1.428rem */
	}
}
@media screen and (min-width: 1280px){
	:root {
		--fs: 1.125; 	/* 18px */
		--lh: 1.44; 	/*  mnb = 1.62rem */
	}
	body.mode-article {
		--fs: 1.2; 	/* 19.2px */
		--lh: 1.5; 	/*  mnb = 1.8rem */
	}
}

Modifié par cpalo (17 Sep 2018 - 12:56)

Salut !


C'est bien pour un élément dans body.mode-article sur un écran de minimum 1280px ? Étrange que ça en prenne que l'un des deux... rien qui surcharge entre temps dans ton inspecteur de code ? Tu as un lien en ligne pour tester ?

Sinon, certainement rien à voir avec le bousin mais :
Pourquoi ta première media est englobée dans un root ?
Il te manque un tiret à ton dernier -lh.

Pour le tiret qui manque dans le dernier -lh c'était une faute de copie.. Dans le css réel il ne manquait pas. Pareil pour l'accolade du root qui manquait et qui donnait l'impression que la première media était englobée dans le root.
Je travaillais en local.. je vais voir pour mettre un exemple en ligne

Ok ok cool
Bah du coup je ne vois pas trop pourquoi ça bloque... ça a l'ai correct... pour l'exemple en ligne j'imagine que c'est pas simple mais du coup pour nous c'est vachement plus dure d'examiner ça pour t'aider... (surtout au niveau de l'utilisation, j'ai du mal a voir comment tu intègre ça avec l'unité etc)
Modifié par _laurent (17 Sep 2018 - 14:48)

je viens de mettre un exemple en ligne
samples.cahue.net/01-home.html
Modifié par cpalo (19 Sep 2018 - 10:39)

@Wollsale
Effectivement ça marche avec ta façon de déclarer.
Dans mon cas, le rem n'était pas oublié : il est donné par la variable calculée :

/* font_size_base : body */
--fs_b: calc(var(--fs) * 1rem);

Par contre je n'avais pas donné le code suivant :

body {
	font-family: sans-serif;
	font-size: var(--fs_b);			
	line-height: var(--lh);
	background-color: #fff;
	color: var(--color_text);				
}

Les modifications de couleur et de line-height sont prises en compte mais pas la font-size

Salut,

C'est pas le bon scope... je crois avoir compris mais c'est chaud a expliquer.

Dans root tu défini FS et FS_B
Dans body.mode-article du viens overider FS
Si tu tente d'utiliser FS directement dans body ou ses descendants c'est bon, mais si tu veux utiliser FS_B c'est toujours l'ancien car il est défini dans le scope ou FS vaut 1.

En gros la solution aurait été d'overider dans root sauf que tu veux le faire en fonction de la classe .mode-article alors la solution serait de déclaré toutes les variable sur body plutot que sur root :

body {
	/* coefficient pour la font-size de base : 16px */
	--fs: 1;
     /* line_height  */					
	--lh: 1.28;	
	/* spacing unit de base = nombre magique */
	--mnb: calc(var(--fs) * var(--lh) * 1rem);	
	/* font_size_base : body */
	--fs_b: calc(var(--fs) * 1rem);
}
@media screen and (min-width: 768px){
	body {
		--fs: 1.05; 	    /* 16.8px */
		--lh: 1.36;     /* mnb = 1.428rem */
	}
}
@media screen and (min-width: 1280px){
	body {
		--fs: 1.125; 	/* 18px */
		--lh: 1.44; 	/*  mnb = 1.62rem */
	}
	body.mode-article {
		--fs: 1.2; 	/* 19.2px */
		--lh: 1.5; 	/*  mnb = 1.8rem */
	}
}

Modifié par _laurent (19 Sep 2018 - 14:45)

Super.; ça fonctionne.
Mais du coup, si j'utilise body comme scope et non plus root, je peux simplifier en écrivant directement :

body {
	font-size: calc(var(--fs) * 1rem);
}

au lieu de :

body {
	font-size: var(--fs_b);	
}

et ne plus utiliser la variable calculée :

/* font_size_base : body */
--fs_b: calc(var(--fs) * 1rem);

Encore merci pour ton aide
Cordialement