Giới thiệu SASS

Dẫn nhập

Ở bài học trước chúng ta đã cùng nhau THỰC HÀNH BEM VÀO PROJECT. Trong bài đó, bạn cần xem qua các bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS và GIỚI THIỆU BEM để có thể hiểu được lợi ích của BEM khi tổ chức và quản lí file CSS.

Trong bài này chúng ta sẽ cùng nhau Tìm hiểu về SASS và những lợi ích của nó. 

---

Nội dung 

Để tiếp thu tốt bài học này các bạn cần:

• Có kiến thức cơ bản về CSS.
• Đã xem qua bài TỔNG QUAN CÁCH HOẠT ĐỘNG CỦA CSS VÀ 3 THỨ ĐỂ TẠO 1 WEBSITE TỐT.
• Đã xem qua bài XỬ LÍ TRÙNG LẶP KHI KHAI BÁO CÁC FEATURES HAY CÁC PROPERTIES CỦA CSS
• Đã xem qua bài TÌM HIỂU QUÁ TRÌNH XỬ LÝ CUỐI CÙNG CỦA CSS
• Đã xem qua bài BEM VÀ CÁCH ĐẶT TÊN CLASS CHO ELEMENT

Trong bài học này chúng ta sẽ cùng nhau tìm hiểu:

• Khái niệm Sass
• Các đặc tính khi sử dụng Sass
• Sass và SCSS

---

Khái niệm Sass

Sass là 1 CSS preprocessor (Xử lí code trước khi compile sang CSS), hay rõ hơn là 1 extension của CSS có chức năng bổ sung các thuộc tính cho code CSS thuần (Sass có 1 số thuộc tính giống với ngôn ngữ lập trình python, C++ ) như function, loop, condition, …)

Đây chính là cách Sass hoạt động

Việc của chúng ta là code Sass và sử dụng công cụ để compile Code CSS ( công cụ compile CSS sẽ được giới thiệu ở các bài học sau)

---

Các đặc tính khi sử dụng Sass

Sử dụng Sass có rất nhiều thuộc tính được thêm vào CSS trong đó, các thuộc tính sau là vô cùng nổi bất, và được ứng dụng phổ biến:

1. VARIABLES: Sử dụng để tái sử dụng các giá trị như colors, font-size (CSS thuần cũng có nhưng Sass sẽ giúp khai báo 1 cách dễ dàng hơn rất nhiều).
2. NESTING: Có thể select element con và khai báo thuộc tính ngay bên trong selector cha (đây cũng là 1 thuộc tính sẽ giúp BEM hoạt động hiệu quả với Sass).

Ví dụ: Trong khai báo CSS thuần

.elementCha{ font-size:  10px }
.elementCon{ color:  red }

Nhưng trong Sass chúng ta có thể khai báo như sau:

.elementCha{
     font-size: 10px;
      .elementCon{
        color: red;
         }
}

3. OPERATORS: Có thẻ cho các công thức tính toán như (+, - , *, /) vào trong code CSS
4. PARTIALS AND IMPORTS: Viết code CSS ở các files khách nhau rồi import chúng vào cùng 1 file (Việc này sẽ giúp chúng ta tổ chức code được thành các components, các part nhỏ, dễ quản lí, mở rộng)
5. MIXINS: Giúp tại sự dụng các đoạn CSS code (Sẽ được giới thiệu ở bài học sau)
6. FUNCTIONS: Giống với mixins nhưng có tham số (Tính năng giống với các ngôn ngữ lập trình như python, java)
7. EXTENDS: Kế thừa thuộc tính của các element khác trong element đang khai báo.

Ví dụ: Khi khai báo Sass:

.example{
     float: left;
     width: 50%;
}
.example2{
       @extend .example;
       backgroud: #ffffff;
}

Khi compile ra css tương đương với

.example, .example2
{
       float: left;
       width: 50%;
}
.example2 {
       backgroud: #ffffff;
}

Các thuộc tính của .example2 đã kế thừa thuộc tính của .example

8. CONTROL DIRECTIVES: Viết code phức tạp sử dụng vòng lặp và conditional (if, for, …) (Đặc tính này sẽ không được giới thiệu trong khóa học này, các bạn có thể tìm hiểu thêm ở  CONTROL DIRECTIVES SASS )

---

SASS và SCSS

Để code Sass chúng ta có 2 loại:

• Loại thứ nhất SASS(original): đuôi file là .sass

.navbar
    list-style:none
    float: left

    .navbar-list .list
        display: inline-block
        margin-left: 30px

Loại code này rất giống cách code python, nó không có “;”, không có “{}”, phân tách các dòng với nhau bởi khoảng thụt đầu dòng. Cách code này là cách code lúc Sass mới xuất hiện, khá phức tạp và khó để chúng ta chuyển từ CSS sang code Sass như thé

• Loại thứ hai SCSS: (Loại mà chúng ta sẽ sử dụng trong khóa học này) đuôi file là .scss

.navbar{
    list-style:none;
    float: left;

    .navbar-list .list {
        display: inline-block;
        margin-left: 30px;
    }       
}

Rõ ràng là dễ nhìn và dễ hiểu hơn loại code bên trên và gần giống với cách code CSS thuần. Và đó là lí do chúng ta sẽ sử dụng loại thứ 2 để code Sass.

Kết luận

Trong bài học này chúng ta đã cùng nhau tìm hiểu về Sass.

Ở bài học sau chúng ta sẽ cùng nhau THỰC HÀNH VÀ TÌM HIỂU KĨ HƠN VỀ CÁC THUỘC TÍNH CỦA SASS.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó".

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.