sử dụng scss tạo 1 grid layout col col-xs

2021-01-25 1862 lượt xem

Trương thịnh

Mục lục [ hide ]

Trong bài trước mình đã hướng dẫn các bạn tạo 1 gulp để minyfy code css. Trong bài này mình sẽ sử dụng gulp để build scss thành các code css được minify chia col giống bootstrap

Phân tích

Cách chia cột tương tác tỷ lệ màn hình với bootstrap 3

Các lệnh bạn cần ghi nhớ khi tiến hành:

Lớp .col-xs-*: phù hợp với màn hình smart phone (< 768px)
Lớp .col-sm-*: phù hợp với màn hình tablet (>= 768px)
Lớp .col-md-*: phù hợp với màn hình laptop, desktop (>= 992px)
Lớp .col-lg-*: phù hợp với màn hình desktop (>= 1200px)

Ví dụ code html: Chia 2 cột với tỉ lệ bằng nhau:

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                Cột thứ 1: Hùng đẹp trai
            </div>
            <div class="col-sm-6">
                Cột thứ 2: Bao nhiêu sắc đẹp hội tụ trên con người anh Hùng
            </div>
        </div>
    </div>
</body>

Cách chia cột trong bootstrap 4

Lớp .col-*: phù hợp với màn hình small smart phone (< 576px)
Lớp .col-sm-*: phù hợp với màn hình smart phone (576px <= x < 768px)
Lớp .col-md-*: phù hợp với màn hình tablet (768px <= x < 992px )
Lớp .col-lg-*: phù hợp với màn hình laptop, desktop (>= 992px)
Lớp .col-xl-*: phù hợp với màn hình desktop (>= 1200px)

Tóm lại bootstrap 4 có độ chia grid nhiều hơn của bootstrap 3.

Yêu cầu bài toán

Giả sử bây giờ mình muốn chia grid như bootstrap 4 nhưng không dùng display flex mà lại dùng fload như bootstrap 3 thì sao? (yêu cầu này là để phù hợp với những dự án mà muốn chạy cả IE 7 đó)

Bắt đầu code SCSS tạo grid layout col

Cấu trúc code Css build ra của bootstrap

Khi build sass của bootstrap chúng ta nhận thấy bootstrap 4 cũng sẽ build code theo dạng như sau:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
/* từ lg đến xs */
.col-lg-1,
.col-lg-2, /* từ 1 đến 12 */
.col-md-1,
.col-md-2,
.col-sm-1
/* ....  */
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/* ///////////////////////////// */
/* // BẮT ĐẦU PHẦN QUAN TRỌNG // */
/* ///////////////////////////// */
/* ///////////////////////////// */
/* từ 1 đến 12 */
.col-xs-1{
  float: left;
}
/* từ 1 đến 12 */
.col-xs-1 {
  width: 8.33333333%;
}
@media (min-width: 768px) {
  /* từ 1 đến 12 */
  .col-sm-1 /*.....*/
  {
    float: left;
  }
  /* từ 1 đến 12 */
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
}
@media (min-width: 992px) {
    /* từ 1 đến 12 */
  .col-md-1/*.....*/
  {
    float: left;
  }
  /* từ 1 đến 12 */
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
}
/* ///////////////////////////////////////////////////// */
/* // Tiếp Tục đến hết tất cả các khung của BOOTSTRAP // */
/* ///////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////// */

Nếu bạn tinh ý sẽ thấy code của bootstrap tuân theo nguyên tắc default chính là col-xs-* (trong bootstrap 3 ) và col-* (trong bootstrap 4 )

Vì diện tích mobile là khá nhỏ chúng ta cần css đặc thù từng loại mobile hơn là PC. Nên mình sẽ chia nhỏ Mobile thành 2 loại là small ( <= 425px )

Lớp .col-*: phù hợp với màn hình small smart phone và cũng là mặc định (< 425px )
Lớp .col-xs-*: phù hợp với màn hình medium mobile (425px <= x < 576px)
Lớp .col-sm-*: phù hợp với màn hình smart phone (576px <= x < 768px)
Lớp .col-md-*: phù hợp với màn hình tablet (768px <= x < 992px )
Lớp .col-lg-*: phù hợp với màn hình laptop, desktop (>= 992px)
Lớp .col-xl-*: phù hợp với màn hình desktop (>= 1200px)

Đây là cách chia của mình, nhưng nếu bạn thích 1 cách chia khác bạn hoàn toàn có thể config lại trong code scss mình sẽ đưa ra role trong phần dưới.

Bạn lưu ý trong container từng khung sẽ có 1 cái width cố định bé hơn cái khung chứa nó. ví dụ là màn hình bé hơn 768px (mobile ) thì có width của container = 750px. vậy mình cũng thiết lập cái role cho container như sau:

Lớp .container < 768px: có width lớn nhất là 750px
Lớp .container < 992px: có width lớn nhất là 970px
Lớp .container < 1200px: có width lớn nhất là 1170px

Thiết lập Code SCSS

@mixin Screen($canvas) {
  @if $canvas == XL {
    @media (min-width: $XL) { 
      @content; 
    } 
  }@else if $canvas == LG {
    @media (min-width: $LG) { 
      @content; 
    } 
  }@else if $canvas == MD {
    @media (min-width: $MD) { 
      @content; 
    } 
  }@else if $canvas == SM {
    @media (min-width: $SM) { 
      @content; 
    } 
  }@else if $canvas == XS {
    @media (min-width: $XS) { 
      @content; 
    } 
  }
}

@mixin clearfix {
  &:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    overflow: hidden;
  }
}

$padding-grid-col: 15px;
$column-max      : 12;

$screens : ( XS, SM, MD, LG, XL ) !default;

$containers-max-width : (
  SM: 750px,
  MD: 970px,
  LG : 1170px,
  XL : 1320px
) !default;

// Khai báo kích thước tương ứng với màn hình thiết bị
$XS : 576px;    /// <  576px => largest mobile
$SM : 768px;    // 576px -> 768px
$MD : 992px;    /// 768px -> 991px
$LG : 1200px;   /// 992px ----> 1199px
$XL : 1400px ;  /// 1200px - 1320px
// media queries


.container-fluid {
  width: 100%;
  padding-right: $padding-grid-col;
  padding-left: $padding-grid-col;
  margin-right: auto;
  margin-left: auto;
}

.container {
  
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @each $screen, $_width in $containers-max-width {

    @include Screen($screen){
      width: $_width;
    }
  }
}


.row{
  margin-right: 0 - $padding-grid-col;
  margin-left: 0 - $padding-grid-col;

  @include clearfix();
}
@for $i from 1 through $column-max {
  .col-#{$i} {
    position: relative;
    min-height: 1px;
    padding-right: $padding-grid-col;
    padding-left: $padding-grid-col;
  }
}
@for $i from 1 through $column-max {
  .col-#{$i} {
    width: (100% * $i) / $column-max;
    float: left; 
  }
}
@each $name in $screens {
  @include Screen($name){
    @for $i from 1 through $column-max {
      .col-#{to-lower-case(#{$name})}-#{$i} {
        width: (100% * $i) / $column-max;
        float: left; 
      } 
    }
  } 
}

chủ đề