Yüzen kutulardan oluşan akışkan bir ızgara yaptığım küçük bir tasarım durumu ortaya çıktı. Bir sıra boyunca kaç tane kutunun çok kolay olduğunu belirtmek ve bunların kabın her iki kenarına yaslanmasını istedim. Çok zor değil, ızgaraları fazla düşünmemekten ve doğru kutu boyutlandırmasını kullanmaktan bildiğimiz için,% 25 genişlikte bir sıra genişliğinde dört adet yüzen kutu elde edebilirsiniz - kolay.
Peki ya kutular arasında kenar boşluğu kullanmak isterseniz? Yine de tamamen mümkün, sadece biraz düşünmeyi gerektirir. Arka arkaya dört tane istediğinizi varsayalım, tüm kenar boşluğu kullanıldıktan sonra ne kadar alanınız kaldığını bulmanız gerekecek. Son satırda marj istemediğiniz için, bu 3 marjdır:
100% - (3 * MARGIN)3 gerçekten "eksi bir istediğiniz satırlar" dır, bu nedenle:
100% - ((ROWS - 1) * MARGIN)Sonra bıraktığınız alanı, istediğiniz gibi kaç kutuya bölersiniz, yani:
(100% - ((ROWS - 1) * MARGIN)) / ROWSBunun için Sass'ı kullanabilirsiniz:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Daha da iyisi, bunu bir @mixin haline getiriyoruz, böylece ihtiyaç duyduğumuz her an çağırabiliriz:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )Bu zor kısmı öğrenmek için videoyu izleyin: nth-child
Videoda, Jade döngüsünün başındaki kısım burada hakkında daha fazla bilgi edinebilirsiniz.
Ve işte Kalem:
CodePen'de Chris Coyier (@chriscoyier) tarafından Sass for Sass kullanımı için Kalem Basit Tekniğine bakın.