Ở Lession 1 này chúng ta sẽ tìm hiểu về Scss và Sass cũng như về sự giống nhau và khác nhau giữa chúng. Bên cạnh đó chúng ta cũng sẽ tìm hiểu về kiến thức cơ bản của Scss và cuối cùng mình sẽ giới thiệu các bạn các option cách cài đặt cho Scss.
1/ Giới thiệu về Scss và Sass
Đầu tiên mình sẽ nói về cơ chế hoạt động của Scss và Sass. Thực ra thì về cơ chế hoạt động của hai thằng này, là đều như nhau, không khác nhau gì cả. Bởi chúng đều có những chức năng như:
- Additional Capabilities like variables and nesting: Có khả năng thêm biến và cơ chế viết lồng nhau.
- More reusable and flexible code: dễ sử dụng, linh hoạt và có thể tái sử dụng nhiều lần như function, mixin,…
- Automatic Vendor Prefixing: chỗ này tụi mình sẽ ví dụ như thế này cho các bạn dễ hiểu. Thông thường khi bạn viết Css như display:flex. Thì thuộc tính css này chỉ hỗ trợ trên Chrome, nhưng trên trình duyệt như safari, FireFox nó thường ko nhận Css này. Do đó Scss và Sass đều có cơ chế tự động complie ra css để hoạt động trên Safari và FireFox.
Vậy câu hỏi mình đặt ra là vì cả hai giống nhau vậy mình nên dùng Scss hay Sass?
Sass được viết tắt bởi cụm từ Syntactically Awesome Style-Sheets. Có cách viết ngắn gọn.
Còn Scss được viết tắt bởi cụm từ Sassy Css. Scss có cách viết thân thuộc hơn, dễ sử dụng hơn, tiêu chuẩn viết đúng hơn nhiều so với Sass. Vì nó bắt buộc bạn phải kết thúc một dòng lênh bằng dấu ” ; ” như Css mà Sass không bắt buộc.
Dưới đây là ảnh minh họa về hai cú pháp của scss và sass:
Về Cheat Sheet của cả hai thì khác nhau như sau:
| Scss | Sass |
| Được bắt đầu bằng và kết thúc bằng dấu ngoặc nhọn “{ }”. Kết thúc dòng lệnh bằng dấu chấm phẩy ” ; “ | Viết một cách ngẫu hứng, không có đóng mở thẻ và dấu kết thúc một lệnh dẫn đến việc khó phân biệt. |
| Bỏ qua dấu khoảng trắng | Kiểm tra khoảng trắng |
| lệnh mixin: @mixin wolfactive-mixin | =wolfactive-mixin |
| lệnh include: @include wolfactive-mixin | +wolfactive-mixin |
| lệnh import: @import wolfactive | giống Scss |
| lệnh extend: @extend wolfactive | giống Scss |
Như vậy chúng ta cũng đã có thể nhìn được tổng quan giữa Scss và Sass có điểm khác biệt như thế nào. Còn về độ dễ sử dụng thì tùy vào cảm nhận của mọi người. Với tụi mình thì tụi mình Scss dễ sử dụng hơn. Vì cú pháp của nó giống với Css. Còn bây giờ mình sẽ đưa ra các option cài đặt Scss.
2/ Cài đặt.
Để có thể sử dụng Scss/Sass có nhiều cách cài đặt khác nhau nên tụi mình không thể hướng dẫn hết được. Các bạn có thể tìm hiểu thêm trên mạng nhé, ở đây tụi mình sẽ đưa ra một số option để cho các bạn cài đặt như:
- Koala: download here.
- Ruby: download here.
- Nodejs: download here.
- TaskRunner: Gruntjs, webpack,…
- Framework.
Đối với các bạn sử dụng dụng terminal để cài đặt như Ruby, Nodejs,… thì các bạn vào đây để lấy lệnh cài đặt.
Tổng Kết
Như vậy mình đã hướng dẫn cho các bạn kiến thức tổng quan về Scss và Sass. Ở bài này chúng ta đã biết được về tên gọi của hai loại, cú pháp, điểm khác nhau và giống nhau. Bên cạnh đó chúng ta cũng có thể hiểu được một số cơ chế thực thi nâng cao như: Additional Capabilities like variables and nesting, More reusable and flexible code, Automatic Vendor Prefixing. Cũng như tụi mình giới thiệu cho các bạn một số cách cài đặt.
Ở bài kế tiếp tụi mình sẽ hướng dẫn các bạn về Variables (biến).
| Bài trước: Lession 0 – Giới thiệu về series SCSS | Bài kế: Lession 2 – Variables |