Hướng dẫn chuyển scss sang css

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.

Nếu bạn không muốn sử dụng Netbeans và chức năng Auto Generate của nó thì ban hoàn toàn có thể thực hiện được bằng cách sử dụng cú pháp command riêng của SASS. Trong bài này mình sẽ tìm hiểu một số lệnh hay sử dụng thôi nhé vì nó cũng không có gì quan trọng.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Một số lệnh trong SASS CSS

Tất cả các lệnh của SASS CSS dưới đây bạn đều phải chạy từ chương trình Start Command Prompt With Ruby nhé.

Lệnh sass --watch: tự động generate file css

Đây là lệnh dùng để cấu hình tự động cập nhật [generate] file SCSS thành file CSS. Cú pháp của nó như sau:

sass --watch path_to_file_scss:path_to_file_css

Bài viết này được đăng tại [free tuts .net]

Trước khi chạy lệnh này bạn phải chắc chắn rằng đã cd vào thư mục của Project nhé.

Ví dụ thư mục Project của tôi là:

D://vertrigo/www/sass
                     |- css
                     |- scss
                            |- style.scss

Lúc này bạn sẽ dùng lệnh cd để đến thư mục 

D://vertrigo/www/sass
                     |- css
                     |- scss
                            |- style.scss

D://vertrigo/www/sass
                     |- css
                     |- scss
                            |- style.scss

sass --watch scss/style.scss:css/style.css

Sau khi chạy lệnh này thì nó sẽ tự tạo một file

D://vertrigo/www/sass
                     |- css
                     |- scss
                            |- style.scss

Lệnh compact - convert css thành một hàng

Lệnh compact là một option của lệnh watch và nó có tác dụng là lúc generate nó sẽ chuyển css thành một hàng.

Cú pháp: 

sass --watch path_to_file_scss:path_to_file_css --style compact

Ví dụ:

sass --watch scss/style.scss:css/style.css --style compact

Lệnh compressed - nén file css

Để tối ưu CSS thì thông thường ta sẽ nén file css lại bằng cách xóa đi các khoảng trắng và xuống hàng. Điều này cũng làm được khi bạn sử dụng SASS bằng cách sử dụng cú pháp compressed, đây cũng là một option của lệnh watch.

Cú pháp:

sass --watch path_to_file_scss:path_to_file_css --style compressed

Ví dụ:

sass --watch scss/style.scss:css/style.css --style compressed

Lệnh expanded - chuyển về định dạng expanded

Nếu bạn muốn file CSS được generate nhìn đẹp và theo từng hàng, từng dòng như code tay thì bạn sử dụng option expanded.

Cú pháp:

sass --watch path_to_file_scss:path_to_file_css --style expanded

Ví dụ:

sass --watch scss/style.scss:css/style.css --style expanded

2. Lời kết

Trên là một số lệnh thường sử dụng trong SASS để generate thành file CSS. Thông thường chúng ta sẽ chọn lệnh watch với option là compressed bởi vì file nén sẽ tối ưu nên website sẽ chạy nhanh hơn.

Như vậy khi sử dụng các lệnh này thì bạn không cần sử dụng Netbeans vẫn được, tuy nhiên có một bất lợi là khi bạn tạo nhiều file Sass thì banj phải thực hiện lệnh cho từng file, vì vậy mình nghĩ bạn cũng nên sử dụng editor để nó gọi tự động thì hay hơn.