Calcul SASS Math
D'essayer de créer une grille souple de vidéos. Au lieu d'utiliser différents %s'pour chaque requête des médias, j'ai été en espérant pour utiliser une norme SASS formule qui calcule sur une base de 100% de largeur, cependant vous ne savez pas si SASS peut le faire. 40 dans la formule ci-dessous, prend en compte 2 x 20px des marges fixes (j'.e ce serait un 3-grille de colonne).
Formule idéale:
ul.videos {
li {
width: ((100% / 3) - 40);
}
}
Toute façon CSS/SASS peut gérer cela? Préférez ne pas utiliser de JS si possible.
source d'informationauteur SeekingCharlie | 2013-09-26
Vous devez vous connecter pour publier un commentaire.
Malheureusement, vous ne pouvez pas soustraire 40px de 33%. SASS génère un standard de fichier CSS pour être interprété par le navigateur, et au moment de la construction de SASS ne connais pas les dimensions du navigateur.
Toutefois, vous devriez être en mesure d'obtenir l'effet désiré en utilisant des CSS marges, par exemple,
Cela est possible dans tous les principaux navigateurs à l'aide de
calc()
.Démo: http://jsfiddle.net/gb5HM/
Bien sûr, vous pouvez toujours déclarer dans un fichier SASS, mais c'est un pur CSS solution. Il n'est pas possible puisque SASS SASS ne sais pas ce que 100% est à la fois la feuille de style est généré, et la valeur du pixel de 100% peut fluctuer en tant que le document est redimensionnée.
Spec: http://www.w3.org/TR/css3-values/#calc
Un autre navigateur plus récent solution serait d'utiliser la flexbox type d'affichage. Il semble avoir une la même quantité de soutien comme calc() (vraiment très navigateurs modernes).
Sass, ou plus précisément de la Boussole, serait de quelque utilité ici depuis qu'il a flexbox mixin.