Cách chuyển đổi CSS sang Sass & SCSS

CSS là một ngôn ngữ thực sự đơn giản và dễ hiểu, nhưng khi nó trở nên quá dài – giả sử trong hàng nghìn dòng, nó sẽ trở thành một ‘cơn ác mộng’ khi bạn muốn làm gì đó. Mọi thứ sẽ quá phức tạp và chúng ta sẽ lạc lối với những quy tắc phong cách nào cần theo kịp hoặc ghi đè. Vì lý do đó, CSS Pre-processor được tạo ra để giúp việc viết CSS có thể lập trình được và dễ bảo trì hơn.

Bạn có thể đang nghĩ đến việc chuyển đổi CSS cũ của mình thành Sass hoặc SCSS. Nếu đúng như vậy, bạn có thể sử dụng một công cụ của bên thứ ba có tên là css2sass.

Sử dụng CSS2SASS

Công cụ này rất đơn giản và trực quan – tôi thậm chí có thể không phải hướng dẫn cho bạn biết cách sử dụng nó. Đầu tiên, mình có các code CSS sau:

header .nav {
  margin-top: 100px;
}
header .nav li {
  margin-left: 10px;
}
header .nav li a {
  height: 30px;
  line-height: 10px;
}

Chúng ta muốn chuyển nó thành cú pháp Sass, nó sẽ thành:

header .nav
  margin-top: 100px
  li
    margin-left: 10px
    a
      height: 30px
      line-height: 10px

Các quy tắc style hiện được lồng trong các bộ chọn trước bằng cách sử dụng thụt đầu dòng để phân biệt các tầng CSS. Nếu chúng ta chuyển nó thành cú pháp SCSS, nó sẽ được phân biệt bằng dấu ngoặc nhọn, giống như trong CSS.

Các quy tắc style giống nhau

Hãy thử một lần nữa. Lần này, chúng ta có hai selectors sau với các quy tắc style chính xác giống nhau và chúng ta sẽ ẩn nó vào cú pháp Sass.

.footer {
  color: #b3b3b3;
  background-color: #fafafa;
}
.copy {
  color: #b3b3b3;
  background-color: #fafafa;
}

Việc convert được tạo khá thông minh, công cụ này nối các selectors trong một dòng duy nhất và phân tách chúng bằng dấu phẩy, như sau.

.footer, .copy
  color: #b3b3b3
  background-color: #fafafa

Mặc dù, đây không phải là những gì tốt nhất, sẽ tốt hơn nếu đầu ra ở trong Selector Inheritance như đoạn code dưới đây.

.inherit1
  color: #b3b3b3
  background-color: #fafafa
.footer
  @extend .inherit1
.copy  
  @extend .inherit1

Kết hợp Pseudo-class và selector

Cuối cùng, chúng ta muốn thử chuyển đổi một số quy tắc kiểu với :hover Pseudo-class và tổ hợp selector, như được hiển thị bên dưới.

.button:hover {
  color: #ffffff;
  background-color: #bf813d;
}
.button.active {
  background-color: #986731;
}

Kết quả công cụ này như bên dưới:

.button
  &:hover
    color: #ffffff
    background-color: #bf813d
  &.active
    background-color: #986731

Công cụ này có một số hạn chế trong việc nhận biết cấu trúc xếp tầng CSS để chuyển đổi chúng một cách thích hợp thành cú pháp Sass hoặc SCSS.

Nhìn chung CSS2SASS là một trong nhiều trang tốt cho những người mới bắt đầu với Sass. Chuyển đổi CSS cũ của bạn và bạn sẽ thấy cách nó được xây dựng theo cú pháp Sass hoặc SCSS.