Trang chủTác giảLiên hệ

SASS/SCSS - Bước tiến mới cho CSS

By Phạm Ngọc Hoàng
Published in CSS
June 08, 2021
5 min read

Hello mọi người, để tiếp nối cho chuỗi bài seri về HTML và CSS vừa rồi, thì ở phần này mình mang đến 1 luồng gió với cho việc xử lý css :)

Không lằng nhằng nữa, cùng mình đi vào bài luôn nhé. Như mọi khi, chúng ta sẽ đi theo cấu trúc như sau:

  1. Mở đầu
  2. SASS/SCSS là gì
  3. Các tính năng cơ bản của SASS
  4. Kết luận

Mở đầu

Làm việc với CSS thuần một thời gian dài bạn sẽ cảm thấy nó rất buồn chán và đôi lúc hơi “ngu ngu”. Đâu đó, bạn bắt gặp những đoạn code lặp lại khá nhiều lần, hay một mã màu nào đó khó nhớ và dùng ở rất nhiều nơi,… Vậy làm thế nào để khiến CSS của mình trở nên “thông minh” và khắc phục được những nhược điểm trên?

Theo định nghĩa của CSS thì:

CSS là ngôn ngữ định kiểu, tạo phong cách, kiểu dáng cho trang web.

Vậy tức là nó không phải một ngôn ngữ lập trình! Điều đó đồng nghĩa với việc chúng ta không thể sử dụng thoải mái những ưu điểm của một ngôn ngữ lập trình với CSS như: biến, vòng lặp, hàm,…

Dân lập trình mà lại không được lập trình khi làm việc thì thật là khó chịu đúng không? Đấy là lý do vì sao mà CSS Preprocessor ra đời!

Vậy CSS Preprocessor là gì?

CSS Preprocessor là ngôn ngữ tiền xử lý CSS. Là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS, giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. CSS Preprocessoer có thể giúp bạn tiết kiệm thời gian viết CSS, dễ dàng bảo trì và phát triển CSS. Có rất nhiều CSS Preprocessor như SASS, LESS, Stylus,… Ở bài viết này, mình sẽ giới thiệu với các bạn về SASS/SCSS.

SASS/SCSS là gì?

SASS - Syntactically Awesome StyleSheets giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng, quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

Một vài lợi ích:

  • Hoàn toàn tương thích với CSS
  • Cung cấp các tiện ích mạnh mẽ như variable, nested, mixins,…
  • Giúp tiết kiệm thời gian viết CSS
  • Luôn giữ code CSS của bạn được DRY (Don’t repeat yourself)
  • Tổ chức các file một cách rõ ràng, dễ bảo trì và phát triển.

  Cài đặt Sass:

$ npm install -g sass

Để theo dõi các file Sass và thực hiện update khi có sự thay đổi:

$ sass —watch input.scss:output.css

SASS được thiết kế và viết bởi các lập trình viên Ruby. Bởi vậy, nó sử dụng cú pháp giống như Ruby với việc không có các dấu ngoặc nhọn {}, dấu chấm phẩy, việc viết CSS như vậy không gần CSS thuần nên việc hiểu và đọc code SASS khá khó hiểu.

Ví dụ:

Biên dịch sang CSS:

Vào tháng 5/2010 phiên bản 3.0 được phát hành, cú pháp mới được giới thiệu SCSS (Sassy CSS). Cú pháp này nhằm thu hẹp khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS. Hiểu 1 cách đơn giản, SCSS là một bản nâng cấp của SASS giúp chúng ta viết CSS một cách dễ dàng và dễ hiểu hơn.

Biên dịch sang CSS:

SASS và SCSS về bản chất vấn đề là giống nhau, chỉ khác nhau ở cách viết. Trong bài viết này, mình sẽ sử dụng cú pháp SCSS để làm ví dụ nhé!

Các tính năng cơ bản của SASS

Biến - Variables

Variables trong Sass được khai báo sử dụng ký tự $. Biến chứa đựng các giá trị mà chúng ta sử dụng nhiều lần như mã màu, font, kiểu chữ,…

alt text

Xếp chồng - Nested Rules

Một trong những tính năng hữu dụng nhất và được sử dụng nhiều nhất trong Sass, đó là khả năng xếp chồng các khai báo với nhau. alt text

  • Xếp chồng các thuộc tính Trong Sass, chúng ta có thể xếp chồng các thuộc tính như margin, padding, border, text… để tránh những khai báo rườm rà, dài dòng: alt text

  • Xếp chồng các media queries alt text

  • Sử dụng để tham chiếu đến Selector cha Trong Sass chúng ta có thể sử dụng & để tham chiếu đến selector cha trong một khai báo. Ví dụ: alt text

Import

Trong Sass chúng ta có thể dễ dàng tôt chức các file styles thành các file riêng biệt với những chức năng riêng và sau đó import chúng và chung một file có chức năng to hơn.

Chúng ta có thể import một file .scss sử dụng @import directive:

@import “variables.scss”;

hoặc thậm chí không cần đến extension:

@import “variables”;

Sass compiler cũng bao gồm một khái niệm gọi là “partials”. Nếu bạn prefix một file .sass hoặc .scss với dấu gạch dưới "_" ví dụ như _variable.scss, nó sẽ không được biên dịch sang CSS. Nó chỉ được biên dịch khi bạn import nó vào một file khác không có prefix gạch dưới.

Extends & Placeholders

Bạn sẽ định nghĩa ra các class, rồi chỗ nào cần sử dụng thì @extend vào. Việc này sẽ tối ưu rất nhiều những đoạn code thừa, lặp đi lặp lại nhiều lần. alt text Ví dụ, nếu như selector .alert không có trước đó, thì làm sao chúng ta có thể sử dụng những khai báo dùng chung cho cả .alert-success.alert-error? Đó chính là placeholder selector.

Placeholder selector trong Sass được khai báo bằng cách prefix một class name với một kí tự %. Nó sẽ không được render trực tiếp khi biên dịch sang CSS, chỉ có những selector extend nó mới có thể được render trong một single block: alt text

Mixin

Mixin là một cơ chế khá phổ biến trong Sass, mỗi mixin sẽ mang nhiều thuộc tính mà bạn đã quy ước 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 đó. alt text

Hoặc bạn có thể truyền tham số vào giống như cách truyền params vào method. alt text

Khi một mixin có thể có một số lượng arguments chưa biết trước, là lúc chúng ta cần sử dụng đến tính năng variable arguments của Sass. Những arguments đó được khai báo cũng giống như những arguments thông thường, nhưng theo sau chúng là ... Ví dụ: alt text

Control Directives

Sass cung cấp một số directives cho việc điều khiển code CSS như: @if, @for, @each, @while. Cách thức hoạt động tương tự các ngôn ngữ lập trình khác.

  • @if

alt text

  • @for: Sass hỗ trợ 2 kiểu @for:

Hãy đến với một ví dụ sau để hiểu rõ hơn về chúng:

alt text

alt text

  • @each

alt text

  • @while

alt text

Kết luận

  • Trong bài viết này, mình đã giới thiệu với các bạn những cú pháp cơ bản nhất để viết CSS bằng SASS/SCSS, bạn có thể tìm hiểu thêm trên website của SASS nhé. Ngoài ra còn rất nhiều CSS Preprocessor khác nữa bạn có thể tìm hiểu thêm. Hy vọng rằng những chia sẻ nhỏ này của mình sẽ giúp bạn phần nào cải thiện hiệu quả khi làm việc với CSS nhé. Đừng quên kết hợp với một số cách viết CSS như BEM, Atomic CSS,… để có thể phát huy sự hiệu qủa cao hơn.
  • Mọi ý kiến thắc mắc gì hãy comment hoặc inbox trực tiếp cho mình nhé. Rất mong sự góp ý của các bạn để cải thiện trọng các bài viết lần sau.

@hoangpn - Better every day!


Phạm Ngọc Hoàng

Related Posts

CSS
Seri CSS cơ bản - [CSS Basic 2] Making layout
June 09, 2021
7 min
© 2021, All Rights Reserved.

Quick Links

Liên hệ quảng cáoThông tinLiên hệ

Social Media