Xin chào các bạn, chào mừng các bạn đến với series SASS/SCSS của mình. Nếu các là một lập trình viên, vậy hẳn rằng các bạn không còn xa lạ gì về CSS đúng không, nhưng mình xin nhắc lại, CSS (Cascading Style Sheet) là một ngôn ngữ được sử dụng để tìm và định dạng lại “phong cách” của các thẻ Html. Vậy với CSS chúng ta có thể định dạng “phong cách” cho trang web của mình, nhưng với nhu cầu mở rộng trang web của mình, các file mã CSS sẽ trở nên lớn hơn để đáp ứng được “phong cách” của trang web mà ta muốn, việc này dẫn đến các file mã CSS sẽ trở nên phức tạp và khó để bảo trì hơn.

Để giải quyết vấn đề trên đã xuất hiện một ngôn ngữ mở rộng CSS, trước khi đến với các ngôn ngữ mở rộng này, ta hãy cùng nhau tìm hiển một số khái niệm sau:

CSS PREPROCESSOR

Được dịch ra là bộ tiền xử lý, nếu các bạn đã từng làm việc với ngôn ngữ C, hẳn là các bạn đã quen thuộc với khái niệm trên, nó có nhiệm vụ biên dịch cấu trúc CSS mới của chúng ta thành dạng CSS thuần.

Việc này đồng nghĩa với việc ta có thể sử dụng các tính năng không tồn tại trong CSS như biến, kế thừa, lồng nhau…Với các tính năng này, ta có thể giải quyết được vấn đề về mức độ phức tạp và dễ dàng bảo trì.

CSS PREPROCESSOR có rất nhiều phiên bản khác với các “style” viết code khác nhau. Trong số đó nổi trội nhất hiện nay là:

Và trong series này, mình sẽ nói sâu vào các cú pháp của SASS.

SASS/SCSS LÀ GÌ

Sass (Syntactically Awesome StyleSheets) là một CSS Preprocessor nói trên giúp ta viết CSS nhanh hơn, có cấu trúc rõ ràng hơn với các tiện ích biến, lồng…và dễ dàng bảo trì hơn. Sass được thiết kế và viết bởi các lập trình viên Ruby, vì vậy nó có cấu trúc cú pháp giống với ruby như không sử dụng dấu ngoặc nhọn {}, không sử dụng dấu chấm phẩy “;”. Với cấu trúc như vậy khiến cho Sass không có nét tương tự với CSS thuần và việc đọc hiểu code Sass trở nên rất khó khăn.

Mãi đến khi phiên bản 3.0 được phát hành, phiên bản này đã giới thiệu một cú pháp mới là SCSS (Sassy CSS). Cú pháp SCSS này đã có những thay đổi nhằm thu hẹp khoảng cách của SASS và CSS bằng cách thay đổi thân thiện với CSS hơn.

Vì vậy, có thể nói, SCSS là một phiên bản nâng cấp cú pháp của SASS nhằm thân thiện cho người dùng hơn trong việc viết code CSS.

Trình compile  SASS

Hiện nay, có khá nhiều trình compile SASS thành CSS, ở đây mình sẽ giới thiệu một số trình compile mà mình đã sử dụng

Trong dự án Frontend

  • Trên windows

           Đầu tiên ta cần phải tải và cài đặt nodejs trên máy windows.

           Sau khi cài đặt ta vào Cmd hoặc PowerShell trên windows để kiểm tra.

          Tiếp đến ta tạo thư mục project, mở PowerShell tại thư mục project bằng cặp shift + chuột phải chọn open PowerShell here.

Sau đó, ta chạy npm install và chờ đợi các gói hổ trợ được cài đặt.

Sau khi npm install chạy xong ta chạy lệnh sau để cài đặt gulp package. Đây chính là package chính mà ta sẽ sử dụng để lập trình dự án của chúng ta.

Tiếp đến ta sẽ cấu trúc thư mục project của chúng ta, dưới đây mình sẽ trình bày cấu trúc mà bản thân mình sử dụng, các bạn có thể thay đổi tuỳ biến theo sở thích và nhu cầu của project của mình.

Trong cấu trúc thư mục trên, thư mục app dùng để chứa source của chúng ta. Thư mục node_modules chứa các thư viện hổ trợ cho việc lập trình của chúng ta. Ta tạo thêm file gulpfile để cấu hình project.

Trong thư mục app bao gồm các file html, thư mục scss sẽ chứa các file code scss của chúng ta, thư mục css ta tạo ra để chứa các file css được compile từ file scss.

Cuối cùng, ta cấu hình file gulp để gulp có thể hiểu được cấu hình thư mục của chúng ta và thực hiện compile các file scss.

Cuối cùng, ta ra PowerShell gõ lệnh gulp và tận hưởng. Nếu xuất hiện lỗi cannot loaded because running scripts is disabled on this system. Ta mở windows PowerShell mới bằng quyền Administrator và chạy lệnh Set-ExecutionPolicy RemoteSigned

  • Trên Linux (centos7…)

Ta chạy lệnh sau

Sau khi cài đặt xong ta kiểm tra version của nodenpm

Tiếp theo, ta thực hiện các bước như cài đặt ở windows.

Lưu ý, nếu ta cài đặt npm trên môi trường máy ảo virtualbox từ phiên bản 4.x trở lên, virtualbox đã disable chức năng tạo symlinks trên phân vùng share vì vậy ta phải enable chức năng này lên mới có thể cài đặt các gói bằng lệnh npm install.

 Các bạn có thể tham khảo cách enable symlinks trên win10 tại đây. Sau khi enable symlink trên win10, ta tiếp tục enable symlinks trên phân vùng share, các bạn có thể tham khảo ở đây.

Trong dự án Backend

Hiện tại, có rất nhiều framework backend có hỗ trợ cài đặt bộ compiler của css preprocessor như rails, laravel, django…Mình xin giới thiệu với các bạn một số framework thông dụng nhất hiện nay. Trong Laravel, framework này có hỗ trợ công cụ Laravel Mix cung cấp các API để ta xác định các bước để xây dựng webpack, là một bộ compiler css/js preprocessor khá mạnh hiện nay. Các bạn có thể tham khảo các bước cài đặt và các sử dụng Laravel Mix cho dự án của mình tại đây. Ngoài ra, trong Rails, một framework của ngôn ngữ ruby, ta có thể sử dụng gem ‘sass-rails’ để thực hiện việc compile. Gem này thường được cài đặt mặt định cho project railscác bạn có thể xem thêm thông tin về gem này tại đây

Qua bài viết này, mình đã giới thiệu về các khái niệm về css preprocessor và làm cách nào cài đặt và sử dụng nó vào project. Trong bài viết sau mình sẽ giới thiệu cho các bạn các cấu trúc code của SCSS. Xin cảm ơn các bạn.