Laravel cơ bản với SASS

Nguyễn Xuân Sơn -

SASS là gì ?

Sass là viết tắt của Syntactically Awesome Style Sheets, một ngôn ngữ tiền xử lý CSS. Cú pháp Css của bạn sẽ được viết dưới dạng Sass, sau đó sẽ được biên dịch qua Css.Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Styles hay LESS.

Các tiện ích của Sass

  • Đã có một thời gian dài phát triển và được sử dụng rộng rãi
  • Tiết kiệm được thời gian code CSS
  • Có cộng đồng rộng lớn
  • Tính tương thích với css cao.

Cách viết cơ bản của SASS :

+ Quy tắc xếp chồng :
+ Biến - Variable :

Cho phép ta định nghĩa variable, thuận tiện khi định nghĩa các font, kiểu chữ chung trong 1 project.

Variable trong Sass có các scope khác nhau: global và scope thường.

Sử dụng biến với SCSS vô cùng cơ bản, bạn chỉ cần đặt tên cho biến – bắt đầu bằng $.

+ Mixin :

Mixin giúp bạn tạo các hàm được sử dụng trong SCSS, bạn hoàn toàn có thể truyền các tham số vào bên trong nó để sử dụng.

Mixin là một cơ chế khá phổ biến trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @include vào một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó (Ví dụ ở trên là color vs font-style)

+ Kế thừa - Extend :

Khi nghe đến extends hay còn gọi là kế thừa, thì có thể bạn sẽ nghĩ ngay đến OOP (lập trình hướng đối tượng) đúng không? Cách làm sẽ là bạn định nghĩa ra 1 class, rồi những tag nào cần thì @extend nó vào là xong:

@extend cho phép ta chia sẻ 1 set style css với các phần tử khác.

+ Import :

@import cho phép ta include nội dung của 1 file vào file khác

Css import gọi HTTP request mỗi lần import, còn sass @import thực hiện import trong CSS, cải thiện performance.

  1. Tạo 1 file _header.scss để CSS riêng cho header.
  2. _body.scss để CSS riêng cho body.
  3. _footer.scss để CSS riêng cho footer.
  4. Rồi ở file style.css ta chỉ cần @import 3 file trên là mượt mà ngay.

Kết luận :

Như những gì mình vừa trình bày ở phía trên, các bạn cũng đã có thể thấy những sức mạnh mà SASS/SCSS mang lại trong việc viết CSS, nó biến việc làm việc với SCSS như làm việc với một ngôn ngữ lập trình thực sự. Ngoài ra, với việc phải biên dịch từ SCSS ra CSS cũng cho phép chúng ta có thể sử dụng 1 số các tính năng như: tự động thêm prefix vào các thuộc tính CSS3, định dạng lại các tệp tin CSS (nén hoặc ko nén).