Viết component CSS (phần 1)
HTML
28
CSS3
43
CSS
40
Sass
8
White

My Mai viết ngày 27/05/2015

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.

alt text

Đầ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ó width là bao nhiêu và width 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 = width-container - width-block

    <div class="block-grid-3">
        <div class="block-grid"></div>
        <div class="block-grid"></div>
        <div class="block-grid"></div>
        ...
    </div>
$width-container: 960px;
$width-block: 350px;
$height-block: 450px;

.block-grid-3 {
    .block-grid {
        @include size ($width-block $height-block);
        margin-right: ($width-container -  ($width-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 ($width-block $height-block);
            margin-right: ($width-container -  ($width-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é

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

33 bài viết.
177 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết 3 năm trước
21 8
White
19 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết 3 năm trước
19 21
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết gần 2 năm trước
19 9
Bài viết liên quan
White
27 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết gần 3 năm trước
27 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
33 bài viết.
177 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!