Viết component CSS (phần 1)
HTML
28
CSS3
53
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

34 bài viết.
186 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
23 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 hơn 3 năm trước
23 21
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 hơn 3 năm trước
21 8
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 2 năm trước
19 9
Bài viết liên quan
White
18 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết gần 3 năm trước
18 10
Male avatar
0 2
Chào mọi người, trong bài viết này chúng ta sẽ tìm hiểu cách (Link) 1 cách đơn giản dễ làm với HTML và Google Charts. Đầu tiên các bạn tạo 1 file ...
TungVuong viết 7 tháng trước
0 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
34 bài viết.
186 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á!