Bonjour.
En décembre j’étais venu ici pour poser une question pour le calcul de valeur de positionnement de background CSS avec des variables SASS. Je n’avais pas eu de solution toute faite, mais les réponses m’avait poussé à revoir complètement le fonctionnement et j’avais promis de revenir ici pour exposer le résultat.
Le voici donc :
Environnement :
Application en webview pour tablette et smartphone en Android et iOS
Matériel :
- On a des sprites SVG qui ont l’avantage d’accepter n’importe quel redimensionnement sans perte de qualité
- Ces sprites sont verticaux (les icônes sont positionnées les unes au-dessus des autres) et chaque icône tient dans sa propre zone carrée de taille unique pour tout le sprite (ie 40 x 40 px).
But de la manœuvre :
Positionner les différentes icônes de ces sprites dans des conteneurs HTML sans avoir à calculer la position et avec une taille variable liée au ratio du device (plus petit sur smartphone) ainsi qu’au besoin du design (petites sur certaines pages, moyennes sur d’autres, voir parfois très grandes). On obtient ainsi des images de pictos tenant dans un format carré, que l'on peut dimensionner à loisir positionner comme on veut (dans du texte, dans des boutons, en flottant, en absolute…) et dont la taille s'adapte aux écrans cibles.
Architecture des fichiers :
- fichier.html
- img / image1.svg
/image2.svg
/…
- sass / functions.scss (fonctions SASS)
/ variables.scss (variables SASS)
/ default.scss (fichier d’import avec media-queries)
/ base.scss (fichier commun aux devices)
/ base_T.scss (fichier spécifique aux tablettes)
/ base_M.scss (fichier spécifique aux mobiles)
/ icons.scss (fichier spécifique aux sprites d’icônes)
/ …
- css / (fichiers css compilés du SASS)
Code HTML :
ex :
Code SASS :
- function.scss
- base_T.scss
- base_M.scss
- icons.scss
PS1 : j’espère avoir été clair et didactique.
PS2 : si quelqu’un a une idée pour améliorer / simplifier les choses, qu’il n’hésite pas…
Modifié par Derwoed (13 Mar 2015 - 08:43)
En décembre j’étais venu ici pour poser une question pour le calcul de valeur de positionnement de background CSS avec des variables SASS. Je n’avais pas eu de solution toute faite, mais les réponses m’avait poussé à revoir complètement le fonctionnement et j’avais promis de revenir ici pour exposer le résultat.
Le voici donc :
Environnement :
Application en webview pour tablette et smartphone en Android et iOS
Matériel :
- On a des sprites SVG qui ont l’avantage d’accepter n’importe quel redimensionnement sans perte de qualité
- Ces sprites sont verticaux (les icônes sont positionnées les unes au-dessus des autres) et chaque icône tient dans sa propre zone carrée de taille unique pour tout le sprite (ie 40 x 40 px).
But de la manœuvre :
Positionner les différentes icônes de ces sprites dans des conteneurs HTML sans avoir à calculer la position et avec une taille variable liée au ratio du device (plus petit sur smartphone) ainsi qu’au besoin du design (petites sur certaines pages, moyennes sur d’autres, voir parfois très grandes). On obtient ainsi des images de pictos tenant dans un format carré, que l'on peut dimensionner à loisir positionner comme on veut (dans du texte, dans des boutons, en flottant, en absolute…) et dont la taille s'adapte aux écrans cibles.
Architecture des fichiers :
- fichier.html
- img / image1.svg
/image2.svg
/…
- sass / functions.scss (fonctions SASS)
/ variables.scss (variables SASS)
/ default.scss (fichier d’import avec media-queries)
/ base.scss (fichier commun aux devices)
/ base_T.scss (fichier spécifique aux tablettes)
/ base_M.scss (fichier spécifique aux mobiles)
/ icons.scss (fichier spécifique aux sprites d’icônes)
/ …
- css / (fichiers css compilés du SASS)
Code HTML :
ex :
<div class="icoTousLesBidules icoBidule-machin ratioGrand"></div>Code SASS :
- function.scss
@function vertIcoPosition($tailleIco, $ordreIco) {
@return round($tailleIco * $ordreIco * -1);
}
/* retourne la position absolue de l’icône dans le sprite en multipliant la hauteur de la zone d’icône par son ordre puis par -1 pour la passer en négatif.
Ainsi la 5ème icône d’un sprite avec des icône de 40px donnera :
40 x 5 x -1 = -200px
Le sprite sera donc remonté de 200px…
*/
@mixin tailleVariableIco($tailleReelleIco, $tailleDesireeIco, $ratioCible) {
$ratioTaille: $tailleDesireeIco / $tailleReelleIco;
$tailleIco: round($tailleReelleIco * $ratioTaille * $ratioCible);
width: $tailleIco;
height: $tailleIco;
}
/* Calcul la taille d’affichage de l’icône en passant en paramètre la taille réelle du SVG, la taille désirée et le ration de l’appareil cible.
*/
@mixin positionVariableIco($tailleReelleIco, $tailleDesireeIco, $ratioCible, $ordreIco) {
$ratioTaille: $tailleDesireeIco / $tailleReelleIco;
$tailleIco: round($tailleReelleIco * $ratioTaille * $ratioCible);
background-position: 0 vertIcoPosition($tailleIco, $ordreIco);
}
/* Calcul la position d’affichage de l’icône avec la fonction vertIcoPosition en passant en paramètre la taille réelle du SVG, la taille désirée, l’ordre de l’icône et le ration de l’appareil cible.
*/
- base_T.scss
$ratioCible: 1; // déclaration du ratio pour les tablettes- base_M.scss
$ratioCible: .67; // déclaration du ratio pour les smartphones- icons.scss
.icoTousLesBidules {
$tailleReelleIco: 54px;
$tailleDesireeIcoPetite: 40px;
$tailleDesireeIcoGrande: 135px; // définition des 3 tailles possibles
background: url('../img/image1.svg') 0 0 no-repeat;
-webkit-background-size: 100% auto;
background-size: 100% auto;
-webkit-background-origin: border-box;
background-origin: border-box;
@include flexIcoSize($tailleReelleIco, $tailleReelleIco, $ratioCible); // fixe la taille de l’image en standard
&.nw-ratioPetit {
@include flexIcoSize($tailleReelleIco, $tailleDesireeIcoPetite, $ratioCible); // fixe la taille de l’image en petit
}
&.ratioGrand{
@include flexIcoSize($tailleReelleIco, $tailleDesireeIcoGrande, $ratioCible); // fixe la taille de l’image en grand
}
&.icoBidule-machin1 {
$ordreIco: 0; // 0 = [ordre de l’icône dans le sprite] -1
@include flexIcoPosition($tailleReelleIco, $tailleReelleIco, $ratioCible, $ordreIco); // fixe la position de l’icône en standard
&.ratioPetit {
@include flexIcoPosition($tailleReelleIco, $tailleDesireeIcoPetite, $ratioCible, $ordreIco); // fixe la position de l’icône en petit
}
&.ratioGrand {
@include flexIcoPosition($tailleReelleIco, $tailleDesireeIcoGrande, $ratioCible, $ordreIco);
// fixe la position de l’icône en grand
}
}
&.icoBidule-machin2 {
...
}... // autant qu'il y a d'icônes dans le sprite
}
PS1 : j’espère avoir été clair et didactique.
PS2 : si quelqu’un a une idée pour améliorer / simplifier les choses, qu’il n’hésite pas…
Modifié par Derwoed (13 Mar 2015 - 08:43)
