Viết component CSS (phần 2)

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