Viết component CSS (phần 1)

Bạn nhìn hình dưới đây, nếu app của bạn xuất hiện nhiều khối block-grid thế này thì mình nghĩ bạn nên viết nó thành 1 component CSS.
Trong phần này mình có sử dụng kiến thức về sass, nên chỗ nào các bạn không biết thì vào link này để xem, ngoài ra mình cũng sử dụng một số mixin mặc định là có sẵn, nếu bạn đang sử dụng Bootstrap hoặc Foundation thì đọc code của nó để xem qua những mixin mà nó đã define sẵn nha ( Khi mình sử dụng Framework thì tất cả những cái đó họ đã viết hết rồi mình chỉ cần sử dụng thôi) Còn nếu bạn ko dùng Framework trên thì xem qua cái này bourbon nó là 1 lib cho sass đó.

Nếu các bạn muốn tìm hiểu về sass và cách sử dụng mixin từ Bootstrap, Foundation hoặc Bourbon thì để lại comment. Mình sẽ viết thêm một bài về phần này.

Đầu tiên, khi nhìn vào hình trên bạn sẽ thấy được là

• block 1, 4 có margin-left = 0 vậy tính chất sẽ là những block ở vị trí 3n + 1 sẽ có margin-left = 0 với n = [1, n]
• block 3, 6 có margin-right = 0 vậy tính chất sẽ là những block ở vị trí 3n sẽ có margin-right = 0 với n = [1, n]

Bạn biết là mỗi block có awidth là bao nhiêu và awidth của container của bạn là bao nhiêu. Vậy nên mình không nên đo thêm khoảng cách của nó là bao nhiêu mà thay vào đó mình nên dùng công thức để tính (ở đây mình tính theo margin-left)
margin-right = awidth-container - awidth-block

    <div class="block-grid-3">
        <div class="block-grid"></div>
        <div class="block-grid"></div>
        <div class="block-grid"></div>
        ...
    </div>

$awidth-container: 960px;
$awidth-block: 350px;
$height-block: 450px;

.block-grid-3 {
    .block-grid {
        @include size ($awidth-block $height-block);
        margin-right: ($awidth-container -  ($awidth-block * 3) ) / 2;
        &:nth-child(3n+1) {
            margin-left: 0;
        }
        &:nth-child(3n) {
            margin-right: 0;
        }
    }
}

Đó là cách hoạt động của 1 block-grid-3. Vậy chúng ta muốn block sẽ thực hiện được từ block-grid-1 -> block-grid-12 thì thế nào?

@for $i from $a through $b {
    .block-grid-#{$i} {
        .block-grid {
            @include size ($awidth-block $height-block);
            margin-right: ($awidth-container -  ($awidth-block * #{$i})) / (#{$i} - 1);
            &:nth-child(#{$i + 1}n) {
                margin-left: 0;
            }
            &:nth-child(#{$i}n) {
                margin-right: 0;
            }
        }
    }
}

Phần 1 mình hướng dẫn cơ bản về viết component cho CSS, Phần 2 tiếp theo mình sẽ hướng dẫn để viết nó với media-query
Các bạn nhớ đón xem nhé