Như đã đề cập phía trên, SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor), nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn. 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.

SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết

SASS: Có phần mở rộng là .sass  Sử dụng cách thụt đầu dòng để phân tách các khối, sử dụng xuống dòng để phân biệt rules (thực tế thì mình không sử dụng SASS nên lấy tạm 1 ví dụ như phía dưới cho các bạn dễ hiển

.header
  color: #f3f3f3;

.header__inner
  border: 1px solid #f3f3f3

SCSS: Có phần mở rộng là .scss - nhân vật chính của chúng ta, SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Trong hình phía dưới:

- Bên trái: Được viết bằng SCSS

- Bên phải: là code CSS được biên dịch từ SCSS

Vì nó là một CSS preprocessor nên bạn cần phải biên dịch từ SASS/SCSS ra CSS để có thể sử dụng được. Có khá nhiều cách để làm điều này, nhưng cách đơn giản nhất để có thể bắt đầu làm quen với nó là sử dụng phần mềm Koala App (bạn có thể download và cài đặt tại đây http://koala-app.com/).

Biến - Variables

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 $, gán cho nó 1 giá trị là xong! Sau đó bạn có thể gọi nó ra để sử dụng bất cứ lúc nào.

Bạn có thể thay đổi giá trị của biến trong quá trình sử dụng

Lúc này giá trị của biến lighter-color đã được thay đổi giữa .header và .footer

Xếp chồng  (Nested Rules)

Đây là một tính năng rất hay của SCSS và được sử dụng rất thường xuyên.

Giả sử bạn đang style 1 cái menu với markup như sau:

<div class="main-menu">
  <ul>
    <li><a href="#" class="active">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
  </ul>
</div>

Với CSS bạn phải viết như sau

.main-menu {
  background: #f3f3f3;
}

.main-menu ul {
  margin: 0;
  padding: 0;
}

.main-menu ul li {
  display: inline-block;
}

.main-menu ul li a {
  text-decoration: none;
}

.main-menu ul li a:hover {
  text-decoration: underline;
}

.main-menu ul li a.active {
  font-weight: bold;
}

Bạn có thể viết ngắn hơn, mạch lạc và dễ hiểu hơn với SCSS nhưng có kết quả tương tự

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

Kế thừa - Extends

Tính năng này cho phép một selector nào đó kế thừa lại toàn bộ các thuộc tình của 1 selector mà bạn đã khai báo sẵn trước đó.

Vòng lặp:

Mệnh đề điều kiện IF

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).

Việc học CSS là căn bản, và mình khuyên các bạn nên viết CSS thuần khi học, nhưng khi bạn đã nắm được các kiến thức cơ bản rồi, thì trong các dự án thực tế, nên chuyển qua sử dụng các CSS Preprocessor, và SCSS là một trong những option mà bạn có thể lựa chọn :D

Ở những bài tiếp theo, mình sẽ hướng dẫn các sử dụng gulp để tạo 1 project cơ bản kết hợp giữa twig và SCSS, rất mong nhận được sự ủng hộ của mọi người bằng cách chia sẻ bài viết, comment để cùng thảo luận :D