Tôi đã có một tình huống thiết kế nhỏ đưa ra khi tôi đang tạo một mạng lưới chất lỏng gồm các hộp có phao nổi. Tôi muốn chỉ định có bao nhiêu hộp trên một hàng rất dễ dàng và để chúng nằm ngang với cả hai cạnh của hộp chứa. Không quá khó, như chúng ta đã biết từ việc không làm quá nhiều lưới và sử dụng kích thước hộp phù hợp, bạn có thể có được bốn hộp nổi trong một hàng có chiều rộng 25% - dễ dàng.
Nhưng nếu bạn muốn sử dụng lề giữa các ô thì sao? Vẫn hoàn toàn có thể, chỉ cần bạn suy nghĩ một chút. Giả sử bạn muốn bốn ô liên tiếp, bạn sẽ cần tính xem bạn còn lại bao nhiêu không gian sau khi đã sử dụng hết phần lề. Bởi vì bạn không muốn ký quỹ trên cái cuối cùng trong hàng, đó là 3 biên:
100% - (3 * MARGIN)3 thực sự là "hàng bạn muốn trừ đi một", vì vậy:
100% - ((ROWS - 1) * MARGIN)Sau đó, bạn chia không gian bạn còn lại cho bao nhiêu hộp bạn muốn trên đó, như vậy:
(100% - ((ROWS - 1) * MARGIN)) / ROWSBạn có thể sử dụng Sass cho việc đó:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Tốt hơn nữa, chúng tôi biến nó thành @mixin, vì vậy chúng tôi có thể gọi nó bất cứ khi nào chúng tôi cần:
@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; ) )Xem video để tìm hiểu về chút khó khăn đó với: nth-child
Trong video, phần mở đầu với vòng lặp Ngọc các bạn có thể tìm hiểu thêm tại đây.
Và đây là chiếc bút:
Xem Kỹ thuật đơn giản bằng bút để sử dụng Sass for Rows của Chris Coyier (@chriscoyier) trên CodePen.