Sass là gì?
Sass là một CSS Processor hỗ trợ trong việc quản lý code CSS, đây là một thư viện khá hay mà bạn nên sử dụng để quản lý source code của mình. Code nó rất giống với một ngôn ngữ lập trình nên nó ngắn gọn và trong sáng, vì vậy những dự án lớn sử dụng nó sẽ rất có lợi. Khi sử dụng thì trình duyệt sẽ không hiểu được nên ta phải thông qua giai đoạn biên dịch file thành file CSS và công việc này đòi hỏi ta phải cài đặt một phần mềm thứ ba. Phần mềm thứ ba sử dụng Ruby để biên dịch nên đòi hỏi ban phải cài đặt Ruby thì mới sử dụng được
Tại sao nên sử dụng Sass
Sass, Less hay Stylus đều mạnh mẽ, việc sử dụng CSS Preprocessor nào còn phụ thuộc vào môi trường làm việc của bạn. Vì thế hãy tìm hiểu và chọn cho mình một CSS Preprocessor phù hợp nhất với mình.
Tổng quan về Sass
Cú pháp
Sass hỗ trợ hai định dạng SCSS (.scss) và Sass. Cú pháp SCSS không khác với cú pháp của CSS nên rất phù hợp với bạn nào muốn làm quen với Sass. Còn Sass thì cú pháp nghiêm ngặt hơn một tý, về cách thụt lùi khoảng trắng và không sử dụng “{}” và “;”
Quy tắc xếp chồng
Các quy tắc xếp chồng sẽ giúp bạn đồng bộ những thành phần cùng với nhau
Quy tắc xếp chồng các thuộc tính
Với những thuộc tính như margin, padding, border…chúng ta có thể xếp chồng để tránh những khai báo không cần thiết.
Quy tắc xếp chồng media queries
Cung cấp quy tắc xếp chồng giúp bạn làm việc tốt hơn với media queries.
Kí hiệu “&”
Cung cấp một cách viết để thêm cho vùng chọn trước phổ biến như pseudo class như :hover, :active…Ngoài ra “&” còn lồng ghép lớp cha cho thuộc tính được khai báo
Biến
Biến là một trong những tính năng hữu ích mà Sass cung cấp. Với Sass bạn có thể khai báo biến và sử dụng lại chúng khi cần thiết.
Mixins
- Mixins cung cấp một cách hòa trộn dễ dàng giữa các thuộc tính và giá trị và chia sẻ giữa các bộ chọn khác nhau.
- Mixins được định nghĩa bởi @mixin (SCSS). Và bạn có thể gọi mixin bằng cách sử dụng @include (SCSS) hoặc + (Sass)
@import
@import giúp bạn tổ chức cấu trúc các tập tin CSS được tốt hơn.
Kế thừa
Đây là tính năng giúp bạn sử dụng lại nhiều thuộc tính khai báo trong CSS.
- Sử dụng @extend
- Placeholder kế thừa: Đây là tính năng kế thừa nhằm tránh những khai báo thuộc tính không cần thiết. Bạn có thể khai báo placeholder kế thừa bằng %
- Kế thừa phần tử: Hỗ trợ làm việc với các phần tử.
Các điều khiển
- @if
- @for
- @each
- while
Sass mang lại cho ta rất nhiều hữu ích tuy nhiên nó không giúp ta có thể viết CSS tốt hơn. Vì thế bạn hãy nên tìm hiểu cách viết CSS tốt hơn như OOCSS (hướng đối tựng trong CSS), SMACSS, BEM…Và Sass sẽ là một công cụ tốt để bạn thực hiện việc đó.
Era – công ty thiết kế web hàng đầu.
Với hơn 10 năm kinh nghiệm thiết kế web với đội ngũ lập trình có công nghệ mạnh mẽ. Era luôn tiếp cận và ứng dụng những công nghệ mới nhất vào thiết kế. Những sản phẩm mà chúng tôi tạo ra luôn nhận được phản hồi tốt nhất từ khách hàng. Góp phần vào việc khẳng định tên tuổi, tạo nên giá trị kinh doanh cao nhất cho doanh nghiệp.
Hãy liên hệ ngay với chúng tôi ngay tại đây để được tư vấn chi tiết.
