Tập tin scss là gì

Quá trình xây dựng một trang web thì phần thiết kế giao diện cho trang web làm sao cho đẹp làm sao cho bắt mắt và ấn tượng đối với người xem là việc vô cùng quan trọng. Thông thường sau khi xây dựng cấu trúc trang web bằng HTML, chúng ta sử dụng CSS để định dạng cho trang web sinh động hơn. Nhưng khi quy mô của dự án lớn hơn thì việc chúng ta viết CSS cũng trở nên phức tạp và khó bảo trì hơn. Vì vậy, chúng ta cần có công cụ để giúp chúng ta viết cũng như quản lý CSS hiệu quả hơn

Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu về SASS. Mình giả sử rằng các bạn đã thành thạo HTML và CSS trước khi đọc tiếp

Xem thêm. Hướng dẫn học HTML và CSS

SASS là gì?

Sass is an extension language format of CSS. Đây là một trong những tiền xử lý thuận lợi cho lập trình viên front-end. Sass cho phép bạn sử dụng các tính năng không tồn tại trong CSS như biến, lồng , mixin, thừa kế và các tính năng khác, giúp việc viết mã CSS trở nên thú vị hơn

Cài đặt SASS ra sao?

Trước khi bạn có thể sử dụng Sass, bạn cần cài đặt nó trong dự án của chúng tôi. Chúng ta có 2 cách để bắt đầu với Sass

1. Sử dụng các ứng dụng hỗ trợ

Chúng ta có rất nhiều phần mềm hỗ trợ giúp bạn biên dịch sass ra css trong vài phút dành cho Mac, Windows và Linux

2. Use the comment line

Các bạn có thể tham khảo cách cài đặt tại đây

Biến đổi

Biến trong SASS được biết đến như một cách để lưu trữ thông tin mà bạn muốn tái sử dụng trong toàn bộ tệp SASS. Bạn có thể lưu trữ mọi thứ như màu sắc, phông chữ tập hợp hoặc bất kỳ thuộc tính CSS nào mà bạn muốn kế thừa. Sass sử dụng các ký tự $ và tên biến để định nghĩa một biến

Ví dụ

Khi Sass được xử lý, nó lấy biến $font-stack và $primay-color và hiển thị ra CSS mà không có sự xuất hiện của 2 biến trên CSS. Đây là một tính năng vô cùng mạnh mẽ khi làm việc với màu sắc chính và sử dụng trong toàn bộ trang

làm tổ

Khi viết HTML, bạn có thể thấy sự phân cấp rõ ràng và trực quan. Sass cho phép bạn lồng các bộ chọn CSS giống như hệ thống phân cấp của HTML. Tuy nhiên, cái gì quá đều không tốt, nếu quá nhiều quy tắc lồng nhau sẽ khiến việc quản lý mã sass và việc biên dịch ra CSS trở nên phức tạp hơn rất nhiều lần

Ví dụ

Bạn nhận thấy rằng bộ chọn ul, li và a nằm bên trong bộ chọn nav. Đây là một cách tuyệt vời để tổ chức CSS và khiến chúng dễ hiểu hơn. Sau khi biên dịch chúng ta được như sau

một phần

Chúng ta có thể dễ dàng quản lý mã sass bằng cách chia nhỏ các tệp sau đó một tệp chính gọi các tệp con. Đây là một tính năng tuyệt vời để quản lý CSS và giúp dễ dàng bảo trì. Môt phần chỉ đơn giản là tên tệp SASS với gạch dưới. Ví dụ _partial. scss. Đánh dấu gạch dưới để biết rằng tệp này là tệp một phần và không được biên dịch ra CSS. Sass một phần được sử dụng giống với chỉ thị @import

Nhập khẩu

CSS có tùy chọn nhập cho phép bạn chia nhỏ các tệp CSS giúp dễ quản lý và bảo trì. Chế độ duy nhất là mỗi lần bạn sử dụng @import trong CSS nó tạo ra thêm một yêu cầu HTTP. Sass cũng hỗ trợ CSS @import  nhưng thay vì có yêu cầu HTTP, Sass sẽ lấy các tệp bạn muốn nhập và kết hợp chúng thành một tệp CSS duy nhất để giảm số lượng yêu cầu HTTP tới máy chủ

Xem thêm. yêu cầu HTTP

Ví dụ bạn có 2 tệp sass, _reset. scss và base. scss. Chúng ta muốn nhập tệp _reset. scss vào cơ sở. scss

Ở trên mình bằng cách sử dụng @import 'đặt lại'; . scss. Khi bạn muốn nhập tệp, bạn không cần thêm phần mở rộng tệp. scss. Khi biên dịch ra CSS chúng ta được như sau

hỗn hợp

Thật sự sẽ rất nhạt và chán khi bạn phải viết lặp đi lặp lại những đoạn CSS giống nhau, đặc biệt là các tiền tố của nhà cung cấp trong CSS3. Sự xuất hiện của mixins sẽ giúp chúng ta tạo ra một nhóm định nghĩa CSS mà chúng ta muốn tái sử dụng trong toàn bộ trang. Hơn nữa, chúng ta có thể truyền vào các tham số khiến mixins linh hoạt hơn

Ứng dụng thông tin ứng dụng tốt nhất của mixin đó là tiền tố nhà cung cấp. Dưới đây là một ví dụ về bán kính đường viền

Để tạo mixin, bạn sử dụng @mixin và đặt tên. Ở đây mình sử dụng tên mixins là border-radius. Bên cạnh đó cũng sử dụng biến $radius bên trong cặp trích đơn để truyền giá trị $radius vào mixin

Sau khi tạo mixin, bạn có thể sử dụng nó như một định nghĩa CSS bắt đầu bằng @include sau đó là tên mixin. Khi biên dịch chúng ta được mã hóa CSS như sau

Mở rộng/Kế thừa

Đây là một tính năng tiện lợi nhất của Sass. Sử dụng @extend cho phép bạn chia sẻ tập hợp thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Nó giúp chúng ta thực hiện tốt quy tắc DRY (Dont’ Reapeat Yourself)

Ví dụ dưới đây tạo ra một chuỗi các thông báo như lỗi, cảnh báo và thành công kế thừa từ thông báo lớp

Đoạn mã phía trên lấy các thuộc tính trong. tin nhắn và áp dụng chúng cho. thành công,. error and. cảnh báo. Biến màu xảy ra khi biên dịch ra CSS, nó giúp chúng ta tránh việc viết nhiều tên lớp vào các phần tử HTML

nhà điều hành

Tính toán trong CSS rất hữu ích cho lập trình viên. Sass hỗ trợ các tiêu chuẩn tính toán như + , – , * , / và %. Trong ví dụ dưới đây, chúng tôi sẽ thực hiện các phép tính đơn giản để tính chiều rộng của một bên và bài viết

Chúng ta vừa tạo một lưới linh hoạt dựa trên 960px. Các thao tác trong Sass cho phép chúng ta chuyển từ giá trị pixel(px) sang phần trăm (%) một cách dễ dàng. Sau khi biên dịch chúng ta được mã hóa CSS như sau

Kết luận

Như vậy chúng ta đã cùng nhau tìm hiểu về SASS và những tính năng tuyệt vời của nó. Nếu bạn nắm giữ những kiến ​​thức ở trên thì bạn đã đạt được cấp độ mới trong quá trình viết CSS rồi đó. Hẹn gặp lại các bạn ở bài tiếp theo. Chúc các bạn thành công