SASS - Dùng sao cho chuẩn CI - 3 "dễ"

SASS là gì

SASS là một CSS Prepocessor (như LESS) giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn.

• Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.
• Lợi ích của SASS mình khó mà có thể nói hết ra đây được, nhưng mình hy vọng bạn sẽ hiểu rằng SASS thú vị như thế nào sau khi làm quen với nó.

Muốn dùng SASS trong rails thì phải làm sao?

• cài đặt theo link sau nhé: https://github.com/rails/sass-rails
• hoặc link sau sẽ có thêm bootstrap: https://github.com/twbs/bootstrap-sass

Dùng thế nào?

• về cách dùng thì đã có bài viết trên viblo về rồi mình xin phép dẫn link, các bạn có thể vào đây để đọc và hiểu hơn về các dùng của nó link: https://viblo.asia/midi9x/posts/PDOkqMKDkjx

Cách viết SASS sao cho chuẩn Framgia-CI và chuẩn 3 "dễ" (dễ đọc, dễ viết, dễ sửa)

• Sass hỗ trợ kiểu viết các thuộc tính cha con theo "Quy tắc xếp chồng" chúng ta nên chỉ dùng cho 3 cấp thuộc tính chồng nhau, ví dụ:

.a {
  .b {
    .c {
      text-align: center;
    }
  }
}

• Khoảng cách từ selector đến dấu ngoặc nhọn mở "{" phải có 1 khoảng trắng như ví dụ trên nhé
• Khoảng cách từ tên thuộc tinh đến giá trị thuộc tính phải có 1 khoảng trắng như ví dụ trên nhé
• Có một dòng trắng giữa 2 blocks

  .a {
     width: 100%;
   }
  
   .b {
      width: 100%;
   }
  

• Các thuộc tính trong một khối phải được sắp xếp theo alpha-b, ví dụ:

.notification-header {
  display: none;
  font-size: 24px;
  line-height: 44px;
  padding-right: 100px;
  position: absolute;
  text-align: right;
  width: 100%;
}

• Tên selector chỉ chứa các ký tự a-z, -, 0-9 không nên chứa các ký tự A-Z hoặc "_"
• indent thì dĩ nhiên phải có rồi nhé
• mã màu nên đặt riêng trong một file rồi inport vào nhé, nên đặt tên biến màu có tên gợi nhớ để dễ sử tái sử dụng, ví dụ: $bg-top-header
• thay vì đặt id cho thẻ thì nên đặt class để dễ tái sử dụng hơn
• giá trị thuộc tính là none chuyển thành 0 (trừ display), ví dụ:

.c {
  border: 0;
}

Trên đây là một số tips nhỏ để viết về SASS trong rails, chúc bạn sử dụng tốt!