Viết component CSS (phần 2)
White

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

Xem Viết Component CSS (phần 1) trước khi đọc phần 2

Tiếp theo ví dụ lần trước, mình sẽ hướng đến width-contain của cả khối block-grid ở các màn hình khác nhau:

Khai báo gía trị mặc định ở đây:

$large-width-contain: 940px;
$medium-width-contain: 750px;

Xây dựng mixin cho block-grid ở những loại màn hình khác nhau:

@mixin block-grid ($width-contain: $large-width-contain, $number-block: 3, $width-each-block: 260px, $height-each-block: 415px) {
  $width: $width-contain;
  $width-block: $width-each-block;
  $width-left: $width - ($number-block * $width-block);
  $margin-right-block: $width-left / ($number-block - 1);
  .block-grid {
    @include size($width-each-block $height-each-block);
    margin-right: $margin-right-block;
  }
}

Xây dựng mixin cho block-grid-1 -> block-grid-12 thì thế nào?

@mixin style-block ($screen: large, $a: 1, $b: 12) {
  @for $i from $a through $b {
    .#{$screen}-block-grid-#{$i},
    .block-grid-#{$i} {
      .block-grid {
        &:nth-child(#{$i + 1}n) {
          margin-left: 0;
        }
        &:nth-child(#{$i}n) {
          margin-right: 0;
        }
    }
  }
}

Áp dụng chúng cho từng loại màn hình khác nhau:

@media only screen and (max-width: 640px) { 
  @include style-block($screen: small);
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
  @include block-grid($width-contain: $medium-width-contain, $number-block: 3, $width-each-block: 240px, $height-each-block: 395px);
  @include style-block($screen: medium);
}
@media only screen and (min-width: 1024px) { 
  @include block-grid;
  @include style-block;
}

Ở đây mình chỉ muốn đưa ra ví dụ để mình có thể nhìn thấy được cách xây dựng component trong CSS. Mọi người không nên triển khai cái này để chia block-grid như vậy đâu. Dạo gần đây mình có thử dùng với Flex trong CSS, bỏ qua các bước tính toán để tính margin... nó làm cái này ngắn gọn hơn rất nhiều.

Lần sau mình sẽ quay lại chủ đề này nhưng mình sẽ apply cái này bằng cách dùng Flex trong CSS

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
{{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á!