Sass calcul mathématique
essayer de créer une grille réactive de vidéos. Au lieu d'utiliser des %différents's pour chaque requête de médias, j'espérais utiliser une formule standard SASS qui calcule basé sur la largeur de 100%, cependant pas sûr si SASS peut faire cela. Les 40 dans la formule ci-dessous, prend en compte 2 x 20px marges fixes (I. e il s'agirait d'une grille à trois colonnes).
formule Idéale:
ul.videos {
li {
width: ((100% / 3) - 40);
}
}
y a-t-il un moyen que CSS/SASS puisse gérer ça? Préférerait ne pas utiliser JS si possible.
3 réponses
Malheureusement, vous ne pouvez pas soustraire 40px de 33%. SASS génère un fichier CSS standard à interpréter par le navigateur, et au moment de la construction, SASS ne connaît pas les dimensions du navigateur.
cependant, vous devriez être en mesure d'obtenir l'effet désiré en utilisant des marges CSS, par exemple
ul.videos {
li {
width: (100% / 3);
div {
margin: 0 20px;
}
}
}
Ceci est possible en tous les principaux navigateurs en utilisant calc().
Démo: http://jsfiddle.net/gb5HM/
li {
display: inline-block;
width: calc(100% / 3 - 40px);
}
bien sûr, vous pouvez toujours déclarer cela dans un fichier SASS mais c'est une solution CSS pure. Ce n'est pas possible dans SASS parce que SASS ne sait pas ce qu'est 100% au moment où la feuille de style est générée, et la valeur du pixel de 100% peut fluctuer au fur et à mesure que le document est redimensionné.
une autre solution de navigateur plus récente serait d'utiliser le flexbox type d'affichage. Il semble avoir un montant de soutien semblable calc() (vraiment très navigateurs modernes).
Sass, ou plus spécifiquement Compass, serait d'une certaine utilité ici car il a flexbox mixin.