So sánh 2 CSS Preprocessor: Sass vs Stylus
CSS Preprocessor là gì?
Nếu bạn muốn làm việc với CSS, thì bạn nhất thiết phải thấy được tầm quan trọng của CSS Preprocessor. Nói một cách đơn giản, CSS Preprocessor là một ngôn ngữ tiền xử lý CSS giúp bạn viết code dễ dàng và thoải mái hơn. Hơn thế nữa, CSS Preprocessor mang tới rất nhiều lợi ích khác cho coder như: tiết kiệm về cả thời gian và trí lực, dễ dàng phát triển và bảo trì cũng như các cấu trúc được bố trí rõ ràng, khoa học từ đó giúp bạn tăng năng suất, hiệu quả làm việc.
Hiện nay, ngôn ngữ CSS Preprocessor rất đa dạng và phong phú. Có thể điểm mặt chỉ tên một số CSS Preprocessor phổ biến như: Sass, Less, CSS-Crush, Myth, Stylus, DtCSS, Rework, v.v…
Tuy nhiên qua bài viết này, cùng Bizfly Cloud tìm hiểu và thực hiện so sánh giữa 2 CSS Preprocessor: Sass và Stylus.
Sass là gì?
Thật sự là không ngoa khi nói rằng Sass là Preprocessor nổi tiếng nhất hiện nay. Từ khi được cho ra mắt cách đây 8 năm , Sass vẫn được tin dùng bởi người sử dụng. Sass cần kết hợp với Ruby để đạt hiệu quả cao trong công việc bằng 2 cú pháp chính: Sass ban đầu, SCSS tương đối mới nhưng đang dần lớn mạnh.
Tìm hiểu thêm: Sass là gì? Sử dụng Sass để viết CSS như thế nào?
Stylus là gì?
Stylus là một Preprocessor mạnh mẽ và mới mẻ với rất nhiều chức năng tùy chỉnh. Stylus còn giúp bạn dễ dàng bỏ qua dấu ngoặc, dấu chấm phẩy hoặc dấu hai chấm, từ đó giúp cho đoạn code của bạn dễ đọc và khoa học hơn.
So sánh Stylus & Sass
Hiệp 1: Cú pháp cơ bản (Basic syntax)
Qua ví dụ trên chúng ta có thể thấy 2 CSS Preprocessor này có cú pháp cơ bản gần như giống nhau. Cả hai đều không cần dấu ngoặc hay dấu chấm phẩy, chúng đều thực hiện dựa vào khoảng trắng. Tuy nhiên, điểm khác nhau giữa chúng đó là đối với Sass cần dấu hai chấm trong khi Stylus thì không.
Tính linh hoạt (Flexibility)
Stylus linh hoạt hơn Sass ở việc nó có thể biên dịch đoạn code có chứa cả dấu chấm phẩy và dấu hai chấm. Còn Sass thì ngược lại.
Như vậy, Stylus có vẻ nhỉnh hơn Sass nhờ tính linh hoạt của nó trong biên dịch. Tuy nhiên, điều này cũng dễ dẫn tới sự cẩu thả trong khi code, vì vậy nếu bạn dùng Stylus làm CSS Preprocessor thì bạn cần thống nhất phương thức code và sử dụng xuyên suốt project để đảm bảo hiệu quả công việc.
Hiệp 1: Stylus thắng
Hiệp 2: Kết hợp (Nesting)
Nesting giúp bạn tiết kiệm các code lặp đi lặp lại và kết hợp các selectors trong các dòng riêng biệt vào nhau. Sass và Stylus đều có chức năng Nesting giống nhau.
Tuy nhiên sau quá trình trải nghiệm cả Sass và Stylus thì ta có thể rút ra nhận xét rằng Sass có cách thức lồng code tiện lợi hơn và rút gọn các code lặp đi lặp lại. Bạn sẽ thấy điểm khác biệt rất rõ trong ví dụ dưới đây. Trong Stylus thì "font" vẫn chưa triệt để thay thế mà phải nhắc lại, nhưng Sass cho phép bạn rút gọn đoạn code bằng cách thay thế hoàn toàn.
Qua ví dụ này thì ta có thể công nhận Sass chiến thắng thuyết phục đúng không? Bởi vì nhờ có Nesting mà CSS Preprocessor sẽ cực kỳ hữu ích nếu chúng ta cần khai báo các thuộc tính như text-align, text-shadow, text-decoration, etc.
Hiệp 3: Các biến (Variables)
Điểm quan trọng nhất của CSS Preprocessor chính là nó có thể chứa các biến, nên chúng ta có thể thuận tiện cập nhật và quản lý code nhờ các biến này. Vì đặc điểm quan trọng này nên Sass và Stylus đều hỗ trợ sử dụng biến. Hãy tìm điểm khác biệt giữa 2 CSS Preprocessor trong sử dụng biến qua ví dụ dưới đây.
Trong đoạn code trên, Stylus có hình thức đơn giản hơn, tuy nhiên Sass lại ghi điểm với coder nhiều hơn nhờ có kí hiệu $ nên dễ giúp các biến trở nên nổi bật hẳn lên trong những đoạn code khác.
Trong hiệp 3 này, Sass tiếp tục dẫn điểm
Hiệp 4: Trích xuất giá trị (Property Lookup)
Chỉ cần xem ví dụ trên thôi là bạn có thể thấy được là CSS Preprocessor nào giành chiến thắng trong hiệp này rồi phải không?
Stylus được trang bị sẵn một chức năng rất hay ho đó chính là Property Lookup. Để tra một giá trị thì với Sass, bạn có thể sử dụng biến để thực hiện việc này, nhưng với Stylus, mọi chuyện trở nên đơn giản hơn nhờ cú pháp "@" để tham chiếu giá trị của một thuộc tính khác trong cùng một block code.
Vì vậy, Stylus chiến thắng trong hiệp 4.
Hiệp cuối: Mixins
Có thể nói Mixins là một trong những công cụ hữu dụng và mạnh mẽ nhất của các CSS Preprocessors bởi vì chúng giúp chúng ta tiết kiệm được cả thời gian và công sức trong việc lập trình CSS cho các browser khác nhau.
Ta sẽ đi tìm điểm giống và khác nhau của Sass và Stylus trong công cụ Mixins này qua ví dụ mà sử dụng Sass và Stylus để cài đặt border-radius.
Qua ví dụ minh họa trên, chúng ta có thể thấy rõ ràng rằng để dùng công cụ Mixins thì Sass cần thêm nhiều biểu tượng và cú pháp khác, trong khi đó Mixins trong Stylus giữ các đoạn code được trình bày gọn gàng, ngắn gọn hơn. Ngoài ra, Stylus còn cho phép bạn có thể dùng "transparent mixins" và giúp bạn không cần dùng tới dấu ngoặc đơn để gọi Mixins. Như vậy, công cụ Mixins trong Stylus đơn giản và thuận tiện hơn nhiều so với Sass.
Hiệp cuối: Stylus thắng
Kết luận: Sass hay Stylus tốt hơn?
Trên thực tế, mọi so sánh đều là khập khiễng bởi vì mỗi người sẽ có quan điểm và cảm nhận riêng khi sử dụng Sass hay Stylus. Và, để quyết định xem Sass hay Stylus tốt hơn thì nó còn phụ thuộc ở bạn. Cùng đóng góp ý kiến và nhận xét cho bài viết này.
Và, các bạn đừng quên theo dõi và đón đọc những bài viết bổ ích khác nhé.
Theo Bizfly Cloud chia sẻ
