NamDev
Guest
Nếu bạn làm web developer thì chắc hẳn cũng đã từng chai mặt với CSS và các cú pháp của nó rồi. Có khi nào bạn đã chán với cách viết CSS thông thường và muốn tìm một cách chuyên nghiệp, magic hơn không? Hôm nay, trong bài viết này mình sẽ giới thiệu qua về SASS/SCSS - thứ có thể giúp các bạn viết CSS trở nên chuyên nghiệp hơn.
Định nghĩa
1. CSS Preprocessor
CSS Preprocessor dịch ra sẽ là "tiền xử lý CSS", là một ngôn ngữ kịch bản mở rộng của CSS có tác dụng giúp công việc viết CSS trở nên dễ đọc, dễ viết hơn bằng cách thêm các cú pháp logic giống với các ngôn ngữ lập trình thông thường rồi sau đó nó sẽ được biên dịch thành CSS để trình duyệt có thể làm việc. Có thể kể đến một số lợi ích của nó như sau:
2. SASS/SCSS
Về mặt bản chất thì SASS với SCSS là một, giữa 2 đứa chỉ khác nhau một chút về cách viết.
SASS là viết tắt của cụm từ Syntactively Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản. SASS có đuôi file là .sass, cho phép chúng ta viết CSS mà không cần sử dụng đến dấu ; và cũng không còn cặp dấu ngoặc nhọn { } nữa do nó sử dụng quy tắc thụt đầu dòng để phân chia các code block.
SCSS ra đời sau SASS nên có cú phá giống với CSS hơn, thu hẹp khoảng cách giữa SASS và CSS. SCSS có phần đuôi mở rộng là .scss, có sử dụng dấu ;, sử dụng ngoặc nhọn để phân chia code block. Theo quan điểm cá nhân thì mình thích sử dụng dấu ngoặc nhọn hơn vì nhìn code nó sẽ rõ ràng hơn, linh động hơn (Sexy CSS).
Định nghĩa
1. CSS Preprocessor
CSS Preprocessor dịch ra sẽ là "tiền xử lý CSS", là một ngôn ngữ kịch bản mở rộng của CSS có tác dụng giúp công việc viết CSS trở nên dễ đọc, dễ viết hơn bằng cách thêm các cú pháp logic giống với các ngôn ngữ lập trình thông thường rồi sau đó nó sẽ được biên dịch thành CSS để trình duyệt có thể làm việc. Có thể kể đến một số lợi ích của nó như sau:
- Đầu tiên phải kể đến là dễ đọc, dễ viết hơn ==> dễ bảo trì hơn.
- Có tính linh hoạt và tái sử dụng cao ==> tiết kiệm thời gian, DRY.
- Có tính tổ chức, được sắp xếp một cách rõ ràng.
2. SASS/SCSS
Về mặt bản chất thì SASS với SCSS là một, giữa 2 đứa chỉ khác nhau một chút về cách viết.
SASS là viết tắt của cụm từ Syntactively Awesome Style Sheets, chương trình tiền xử lý bằng ngôn ngữ kịch bản. SASS có đuôi file là .sass, cho phép chúng ta viết CSS mà không cần sử dụng đến dấu ; và cũng không còn cặp dấu ngoặc nhọn { } nữa do nó sử dụng quy tắc thụt đầu dòng để phân chia các code block.
SCSS ra đời sau SASS nên có cú phá giống với CSS hơn, thu hẹp khoảng cách giữa SASS và CSS. SCSS có phần đuôi mở rộng là .scss, có sử dụng dấu ;, sử dụng ngoặc nhọn để phân chia code block. Theo quan điểm cá nhân thì mình thích sử dụng dấu ngoặc nhọn hơn vì nhìn code nó sẽ rõ ràng hơn, linh động hơn (Sexy CSS).