difference-scss-sass--600x271-wolfactive-949x475
21/02/2021

Lession 1: Tổng quan và hướng dẫn cài đặt Scss

Lession 1 này chúng ta sẽ tìm hiểu về ScssSass 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 ScssSass. 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 đó ScssSass đề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:

Capture

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ư:

Đố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

THÔNG TIN LIÊN HỆ

Vui lòng chọn size trước khi đặt hàng (*)