Học Sass toàn tập trong 30 phút



Trước khi bắt đầu học sass thì bạn cần biết sass là gì và vì sao nên học sass

Sass là gì? Vì sao nên học Sass?

Sass (Syntactically Awesome Style Sheets) là một extension của CSS cho phép bạn sử dụng những thứ như biến, quy tắc lồng nhau, import và nhiều chức năng khác nữa.

Sass tương thích với mọi version của CSS. Để sử dụng Sass bạn cần phải cài đặt Ruby. Bạn có thể tham khảo thêm ở trang chủ của Sass https://sass-lang.com/

Vì sao nên học Sass?

Với nhiều tính năng hữu ích, Sass giúp developer viết style cho ứng dụng nhanh hơn và việc bảo trì, nâng cấp cũng dễ dàng hơn.

Hơn nữa Sass cũng rất dễ học, bạn chỉ cần mất 30 phút đến 1 tiếng là có thể sử dụng Sass basic.

Học Sass trong vòng 30 phút

Trước khi học Sass, bạn cần cài đặt môi trường để có thể bắt đầu

Cài đặt Sass

Nếu bạn dùng Mac Os. Chỉ cần gõ lệnh sau để cài đặt Sass với home brew

Cài đặt bằng node

Ngoài ra bạn có thể tham khảo thêm ở đây nhé

https://sass-lang.com/install

CSS Preprocessing

CSS preprocessor là một ngôn ngữ cho phép developer viết code trong 1 ngôn ngữ khác và sau đó biên dịch sang CSS

Sass sẽ biên dịch file .scss sang .css. Để biên dịch file, bạn sẽ dùng cú pháp như sau

Hoặc thêm tùy chọn –watch để tự động biên dịch trong quá trình viết code

Sass variables

Sass variables là biến giống như trong các ngôn ngữ lập trình khác. Để hiểu rõ hơn thì bạn xem ví dụ bên dưới nhé

Sass Nesting

Sass cho phép bạn lồng các thẻ CSS giống như HTML mà bạn hay viết. Xem ví dụ sau

Sass Partials

Sass Partials là một quy chuẩn mà bạn nên tuân thủ theo. Nếu những file .scss bạn không muốn biên dịch thì sẽ đặt tên theo cú pháp _patials.scss. Những file này thường sẽ được import vào trong những file khác để sử dụng

Ví dụ: Mình muốn tách variables ra thành file riêng để dễ quản lý thì tạo thêm file _variable.scss. Trong đấy mình khai báo toàn bộ các biến sử dụng. Và trong file input.scss mình sẽ import _variables.scss vào là được

Sass Import

Như vừa nói ở trên. Bạn có thể tách ra thành nhiều file để dễ quản lý hơn. Cú pháp import sẽ là

Lưu ý: bạn đặt tên _variables.scss hoặc variables.scss thì cú pháp import vẫn giống như trên

Sass Mixins

Mixins được hiển đơn giản giống như function trong các ngôn ngữ lập trình bạn đã học. Xem ví dụ bên dưới để hiểu rõ hơn

Extend/Inheritance

Extend giúp bạn có thể chia sẽ những phần CSS chung giữa các selector. Xem ví dụ bên dưới

Operators

Thực hiện một số phép toán cơ bản như cộng, trừ, nhân, chia

Với một số nội dung bên trên, bạn có thể hòan toàn tự viết sass cho project của mình. Để tìm hiểu thêm về Sass, bạn có thể tham khảo tài liệu bên dưới nhé

https://sass-lang.com/documentation

Bình luận

Bài viết cùng chuyên mục