Bộ tiền xử lý CSS So sánh Sass so với LESS
Có một số CSS Pre xử lý, LESS, Sass, Stylus và Swith CSS, chỉ để đặt tên cho một số. Bộ tiền xử lý CSS, như chúng ta đã nói thường thấy trước đây, chủ yếu nhằm mục đích làm cho tác giả CSS năng động hơn, có tổ chức và hiệu quả hơn. Nhưng, câu hỏi là, cái nào trong số họ làm công việc tốt nhất?
Chà, tất nhiên, chúng tôi sẽ không xem xét từng người trong số họ, thay vào đó, chúng tôi sẽ chỉ so sánh hai trong số những người phổ biến hơn: Sass và ÍT. Để quyết định, chúng tôi sẽ so sánh hai trong bảy yếu tố: yếu tố nào hoạt động tốt hơn sẽ được một điểm; trong trường hợp hòa, cả hai sẽ được thưởng một điểm.
Hãy bắt đầu nào.
Cài đặt
Hãy bắt đầu với bước rất cơ bản, Cài đặt. Cả Sass và LESS đều được xây dựng trên nền tảng khác nhau, Sass đang chạy trên Ruby trong khi LESS là một thư viện JavaScript (mà nó là thực ra cũng được xây dựng trên Ruby lúc đầu).
Sass: Sass cần Ruby để hoạt động, trong Mac, cái này đã được cài đặt sẵn, nhưng trong Windows có lẽ bạn cần phải cài đặt nó trước khi bạn có thể bắt đầu chơi với Sass. Hơn nữa, Sass cần được cài đặt thông qua Terminal hoặc Command Prompt. Có một số ứng dụng GUI bạn có thể sử dụng tại chỗ nhưng chúng không miễn phí.
ÍT HƠN: LESS được xây dựng dựa trên JavaScript, do đó, LESS không dễ dàng như liên kết thư viện JavaScript với tài liệu HTML của bạn. Ngoài ra còn có một vài ứng dụng GUI để trợ giúp biên dịch LESS sang CSS và hầu hết chúng đều miễn phí và hoạt động rất tốt (ví dụ: WinLess và LESS.app).
Phần kết luận: LESS rõ ràng là dẫn đầu.
Tiện ích mở rộng
Cả Sass và LESS đều có tiện ích mở rộng để phát triển web nhanh hơn và dễ dàng hơn.
Sass: Trong bài đăng cuối cùng của chúng tôi, chúng tôi đã thảo luận về La bàn, phần mở rộng dựa trên Sass hiện tại và phổ biến. La bàn có một số Mixins để viết cú pháp CSS3 trong thời gian ngắn hơn.
Nhưng La bàn không chỉ là CSS3 Mixins, nó còn bổ sung các tính năng rất hữu ích khác như Trình trợ giúp, Bố cục, Kiểu chữ, Bố cục Lưới và thậm chí là Hình ảnh Sprite. Nó cũng có cấu hình tập tin nơi chúng ta có thể kiểm soát đầu ra CSS và một số tùy chọn khác. Vì vậy, trong ngắn hạn, La bàn là gói tất cả trong một để phát triển web với Sass.
ÍT HƠN: LESS cũng có một số tiện ích mở rộng, nhưng không giống như La bàn có tất cả những gì chúng ta cần ở một nơi, chúng được tách ra và mỗi trong số chúng được xây dựng bởi các nhà phát triển khác nhau. Đây sẽ không phải là vấn đề đối với người dùng dày dạn nhưng với những người mới bắt đầu sử dụng LESS, họ cần dành chút thời gian để chọn đúng tiện ích mở rộng phù hợp với quy trình làm việc của họ.
Dưới đây là một vài tiện ích mở rộng LESS mà bạn có thể cần đưa vào dự án của mình:
- Hỗn hợp CSS3: LESS Element, Preboot, LESS Mixins.
- Lưới: 960.gs, Không khung, Semantic.gs
- Bố trí: Thậm chí ít hơn
- Linh tinh: Twitter Bootstrap
Phần kết luận: Tôi nghĩ rằng chúng ta phải đồng ý Sass và La bàn là một bộ đôi tuyệt vời và tính năng hình ảnh Sprite thực sự rất tuyệt vời, vì vậy một điểm cho Sass ở đây.
Ngôn ngữ
Mỗi bộ tiền xử lý CSS có ngôn ngữ riêng và chúng hầu hết đều phổ biến. Ví dụ: cả Sass và LESS đều có Biến, nhưng không có sự khác biệt đáng kể nào trong nó, ngoại trừ Sass định nghĩa các biến có một $ ký trong khi LESS làm điều đó với một @ ký tên. Họ vẫn làm điều tương tự: lưu trữ một giá trị không đổi.
Dưới đây, chúng tôi sẽ kiểm tra một số ngôn ngữ được sử dụng phổ biến nhất cả trong Sass và LESS (dựa trên kinh nghiệm của tôi).
Làm tổ
Quy tắc lồng là thực hành tốt để tránh viết các bộ chọn lặp đi lặp lại và cả Sass và LESS đều có cùng một quy tắc trong quy tắc lồng;
Sass / Scss và ÍT
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; ul đệm: 0; lề: 0;
Nhưng Sass / Scss đưa phương thức này tiến thêm một bước bằng cách cho phép chúng ta cũng lồng các thuộc tính riêng lẻ, đây là một ví dụ:
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; ul đệm: 0; lề: 0; viền: style: solid; trái: width: 4px; màu: # 333333; phải: width: 2px; màu: # 000000;
Mã này sẽ tạo đầu ra sau.
điều hướng lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; kiểu viền: chắc chắn; viền-trái-chiều rộng: 4px; viền trái-màu: # 333333; viền-phải-chiều rộng: 2px; viền phải màu: # 000000; nav ul đệm: 0; lề: 0;
Phần kết luận: Nesting tài sản cá nhân là một bổ sung tốt đẹp và được xem xét thực hành tốt nhất, đặc biệt là nếu chúng ta tuân theo nguyên tắc DRY (Đừng lặp lại chính mình). Vì vậy, tôi nghĩ rõ ràng cái nào làm tốt hơn trong trường hợp này.
Kế thừa Mixins và Selector
Mixins trong Sass và LESS được định nghĩa khác nhau một chút. Trong Sass, chúng tôi sử dụng@mixin lệnh trong khi trong LESS chúng ta định nghĩa nó với bộ chọn lớp. Đây là một ví dụ:
Sass / Scss
@mixin Border-radius ($ value) Border-radius: $ value; nav lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; @include Border-radius (10px);
ÍT HƠN
.đường viền (@radius) đường kính bán kính: @radius; nav lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; .border (10px);
Mixins, trong Sass và LESS, được sử dụng để bao gồm thuộc tính từ quy tắc này sang quy tắc khác. Trong Sass, phương pháp này được thực hiện thêm với Kế thừa chọn. Khái niệm này giống hệt nhau, nhưng thay vì sao chép toàn bộ các thuộc tính, Sass sẽ mở rộng hoặc chọn các nhóm có cùng thuộc tính và giá trị bằng cách sử dụng @mở rộng chỉ thị.
Hãy xem ví dụ này dưới đây:
.khoanh tròn viền: 1px solid #ccc; bán kính đường viền: 50px; tràn: ẩn; .avatar @extend .circle;
Mã này sẽ có kết quả là;
.hình tròn, .avatar Border: 1px solid #ccc; bán kính đường viền: 50px; tràn: ẩn;
Phần kết luận: Sass đi trước một bước bởi sự kế thừa Mixins và Selector khác biệt.
Hoạt động
Cả Sass và LESS đều có thể thực hiện các phép toán cơ bản, nhưng đôi khi chúng trả về các kết quả khác nhau. Xem cách họ thực hiện phép tính ngẫu nhiên này:
Sass / Scss
$ lề: 10px; div lề: $ lề - 10%; / * Lỗi cú pháp: Đơn vị không tương thích: '%' và 'px' * /
ÍT HƠN
@margin: 10px; div lề: @margin - 10%; / * = 0px * /
Phần kết luận: Sass, trong trường hợp này, đang làm điều đó chính xác hơn; vì% và px không tương đương, nên sẽ trả về lỗi. Mặc dù, tôi thực sự hy vọng rằng nó có thể là một cái gì đó như 10px - 10% = 9px.
Thông báo lỗi
Thông báo lỗi là quan trọng để xem những gì chúng tôi đang làm sai. Hãy tưởng tượng hàng ngàn dòng mã và một chút lỗi nhỏ ở đâu đó trong sự hỗn loạn. Rõ ràng thông báo lỗi sẽ là cách tốt nhất để tìm ra vấn đề một cách nhanh chóng.
Sass: Trong ví dụ này, tôi chỉ sử dụng Dấu nhắc lệnh để chạy trình biên dịch. Sass sẽ tạo ra một thông báo lỗi bất cứ khi nào có sự vô hiệu trong mã. Trong trường hợp này, chúng tôi sẽ xóa một dấu chấm phẩy trên dòng 6 và điều này sẽ chuyển sang một lỗi. Hãy nhìn vào ảnh chụp màn hình dưới đây.
Khi tôi lần đầu tiên nhìn thấy thông báo này, tôi khó có thể hiểu nó. Ngoài ra, có vẻ như Sass hơi lạc lõng với lỗi. Nó nói rằng lỗi là trên dòng 7, thay vì 6.
ÍT HƠN: Với cùng một kịch bản lỗi, thông báo LESS được trình bày tốt hơn và nó cũng có vẻ chính xác hơn. Hãy nhìn vào ảnh chụp màn hình này:
Phần kết luận: LESS mang lại trải nghiệm tốt hơn về vấn đề này và chiến thắng.
Tài liệu
Tài liệu là một phần rất quan trọng cho mỗi sản phẩm; ngay cả những nhà phát triển dày dạn cũng sẽ gặp khó khăn khi làm những việc mà không có Tài liệu.
Sass: Nếu chúng ta xem tài liệu tại trang web chính thức, cá nhân tôi, cảm thấy như mình đang ở giữa một thư viện, tài liệu rất toàn diện. Tuy nhiên, giao diện, nếu điều đó quan trọng với bạn, không phải là động lực để đọc, cộng với nền là màu trắng trơn.
Bài thuyết trình giống như tài liệu W3 hoặc WikiPedia. Tôi không biết đây có phải là tiêu chuẩn hiển thị tài liệu trên Internet không, nhưng đó không phải là cách duy nhất.
ÍT HƠN: Mặt khác, tài liệu LESS rõ ràng hơn mà không cần quá nhiều giải thích văn bản, và nó đi thẳng vào các ví dụ. Nó cũng có kiểu chữ tốt và phối màu tốt hơn. Tôi nghĩ rằng đây là lý do tại sao LESS thu hút sự chú ý của tôi ngay từ đầu và tôi có thể học nó nhanh hơn vì cách bố trí và trình bày tài liệu.
Phần kết luận: Trình bày tài liệu LESS tốt hơn, mặc dù Sass có tài liệu toàn diện hơn, vì vậy tôi nghĩ chúng ta có thể gọi đây là một sự ràng buộc.
Suy nghĩ cuối cùng
Tôi nghĩ đó là một kết luận rõ ràng rằng Sass là tốt hơn với tổng số điểm là 5 so với 3 cho BÀI HỌC. Tuy nhiên, điều đó không có nghĩa là ÍT là xấu; họ chỉ cần trở nên tốt hơn Cuối cùng, vẫn là quyết định của người dùng cuối để chọn bộ tiền xử lý mà họ chọn. Có thể là Sass hoặc LESS, miễn là họ cảm thấy thoải mái và năng suất hơn, thì đó là người chiến thắng trong danh sách của họ.
Cuối cùng, nếu bạn có điều gì đó trong đầu về chủ đề này, vui lòng chia sẻ nó trong hộp bình luận bên dưới.
