LESS SASS LÀ GÌ

     

Có một vài CSS Pre xử lý, LESS, Sass, Stylus với Swith CSS, chỉ để đặt tên cho một số. Bộ tiền giải pháp xử lý CSS, như họ đã nói thường bắt gặp trước đây, chủ yếu nhằm mục đích làm cho cho người sáng tác CSS năng rượu cồn hơn, có tổ chức triển khai và hiệu quả hơn. Nhưng, câu hỏi là, loại nào trong các họ làm quá trình tốt nhất?

Chà, vớ nhiên, cửa hàng chúng tôi sẽ không chu đáo từng người trong các họ, cố kỉnh vào đó, công ty chúng tôi sẽ chỉ so sánh hai trong các những người thông dụng hơn: Sass và ÍT. Để quyết định, chúng tôi sẽ so sánh hai trong bảy yếu hèn tố: nguyên tố nào vận động tốt hơn sẽ được một điểm; trong trường vừa lòng hòa, cả hai sẽ tiến hành thưởng một điểm.

Bạn đang xem: Less sass là gì

Hãy ban đầu nào.

Cài đặt

Hãy ban đầu với bước rất cơ bản, Cài đặt. Cả Sass với LESS các được xây cất trên nền tảng khác nhau, Sass đang hoạt động trên Ruby trong những lúc LESS là 1 trong thư namlinhchihoasen.comện JavaScript (mà nó thực ra cũng được xây dựng bên trên Ruby lúc đầu).

Sass: Sass yêu cầu Ruby nhằm hoạt động, trong Mac, điều này đã được thiết lập sẵn, dẫu vậy trong Windows tất cả lẽ bạn phải cài đặt nó trước khi bạn cũng có thể bắt đầu đùa với Sass. Rộng nữa, Sass đề nghị được thiết lập 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 khu vực nhưng chúng không miễn phí.

ÍT HƠN: LESS được xây dựng dựa trên JavaScript, bởi đó, LESS không dễ ợt như links thư namlinhchihoasen.comện JavaScript với tài liệu HTML của bạn. Hình như còn gồm một vài vận dụng GUI nhằm trợ góp biên dịch LESS sang trọng CSS và hầu hết chúng phần nhiều miễn chi phí và chuyển động rất tốt (ví dụ: WinLess với LESS.app).

Phần kết luận: LESS ví dụ là dẫn đầu.

Tiện ích mở rộng

Cả Sass với LESS đều có tiện ích mở rộng để cải cách và phát triển web cấp tốc hơn và dễ ợt hơn.

Sass: Trong bài đăng sau cùng của chúng tôi, cửa hàng chúng tôi đã đàm luận về La bàn, phần không ngừng mở rộng dựa bên trên Sass lúc này và phổ biến. La bàn có một số trong những Mixins nhằm namlinhchihoasen.comết cú pháp CSS3 trong thời gian ngắn hơn.

Nhưng La bàn không những là CSS3 Mixins, nó còn bổ sung các tác dụng rất hữu ích khác ví như Trình trợ giúp, bố cục, hình dạng chữ, bố cục tổng quan Lưới và thậm chí còn là Hình hình ảnh Sprite. Nó cũng có thông số kỹ thuật tập tin nơi bạn có thể kiểm soát cổng output CSS và một số trong những tùy lựa chọn khác. Bởi vì vậy, trong ngắn hạn, La bàn là gói toàn bộ trong một để phát triển web cùng với Sass.

ÍT HƠN: LESS cũng đều có một số ứng dụng mở rộng, tuy thế không y hệt như La bàn có toàn bộ những gì bọn họ cần tại 1 nơi, bọn chúng được bóc tách ra và mỗi trong các chúng được kiến thiết bởi những nhà phát triển khác nhau. Đây sẽ chưa phải là vấn đề so với người cần sử dụng dày dạn tuy nhiên với những người mới bước đầu sử dụng LESS, họ đề nghị dành chút thời hạn để lựa chọn đúng phầm mềm mở rộng cân xứng với quy trình thao tác của họ.

Dưới đấy là một vài luôn thể ích mở rộng LESS mà chúng ta có thể cần đưa vào dự án công trình của mình:

Hỗn hợp CSS3: LESS Element, Preboot, LESS Mixins. Lưới: 960.gs, ko khung, Semantic.gs Bố trí: Thậm chí ít hơn Linh tinh: Twitter Bootstrap

Phần kết luận: Tôi suy nghĩ rằng họ phải đồng ý Sass với La bàn là một cặp đôi tuyệt vời và nhân kiệt hình ảnh Sprite thực sự khôn cùng tuyệt vời, vày vậy một điểm mang đến Sass sinh hoạt đây.

Ngôn ngữ

Mỗi bộ tiền xử lý CSS có ngôn từ riêng cùng chúng hầu như đều phổ biến. Ví dụ: cả Sass và LESS đều có Biến, nhưng không tồn tại sự biệt lập đáng kể nào vào nó, ngoài Sass định nghĩa những biến gồm một $ ký trong khi LESS làm điều đó với một
ký kết tên. Họ vẫn thực hiện điều tương tự: lưu trữ một cực hiếm không đổi.

Dưới đây, shop chúng tôi sẽ kiểm tra một trong những ngôn ngữ được sử dụng thông dụng nhất cả trong Sass và LESS (dựa trên kinh nghiệm tay nghề của tôi).

làm tổ

Quy tắc lồng là thực hành xuất sắc để tránh namlinhchihoasen.comết các bộ chọn lặp đi lặp lại và cả Sass với LESS đều phải có cùng một nguyên tắc trong quy tắc lồng;

Sass / Scss và ÍT

điều phối lề: 50px auto 0; chiều rộng: 788px; chiều cao: 45px; ul đệm: 0; lề: 0; nhưng Sass / Scss đưa thủ tục này tiến thêm một bước bằng phương pháp cho phép bọn họ 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; namlinhchihoasen.comề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.

Xem thêm: Tải Mini World Hack Xu Và Đầu 2021 Apk V0, Mini World: Block Art Mod Apk

điều phối lề: 50px tự động 0; chiều rộng: 788px; chiều cao: 45px; đẳng cấp namlinhchihoasen.comền: chắc chắn; namlinhchihoasen.comền-trái-chiều rộng: 4px; namlinhchihoasen.comền trái-màu: # 333333; namlinhchihoasen.comền-phải-chiều rộng: 2px; namlinhchihoasen.comền bắt buộc 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 nhất và được xem như xét thực hành xuất sắc nhất, nhất là nếu họ tuân theo nguyên tắc DRY (Đừng lặp lại chính mình). Do vậy, tôi nghĩ ví dụ cái làm sao làm xuất sắc hơn vào trường đúng theo này.

thừa kế Mixins và Selector

Mixins trong Sass và LESS được định nghĩa khác biệt một chút. Trong Sass, shop chúng tôi sử dụng
mixin lệnh trong lúc trong LESS chúng ta định nghĩa nó với bộ chọn lớp. Đây là 1 trong 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;
radius; nav lề: 50px auto 0; chiều rộng: 788px; chiều cao: 45px; .border (10px); Mixins, vào Sass cùng LESS, được thực hiện để bao gồm nằm trong tính từ quy tắc này sang phép tắc khác. Trong Sass, phương pháp này được tiến hành thêm với Kế vượt chọn. định nghĩa này hệt nhau nhau, nhưng thế vì xào luộc toàn bộ những thuộc tính, Sass sẽ mở rộng hoặc chọn các nhóm gồm cùng nằm trong tính cùng giá trị bằng phương pháp sử dụng
mở rộng lớn chỉ thị.

Hãy xem lấy một ví dụ này dưới đây:

.khoanh tròn namlinhchihoasen.comền: 1px solid #ccc; bán kính đường namlinhchihoasen.comền: 50px; tràn: ẩn; .avatar
extend .circle; Mã này sẽ có công dụng là;

.hình tròn, .avatar Border: 1px solid #ccc; nửa đường kính đường namlinhchihoasen.comền: 50px; tràn: ẩn; Phần kết luận: Sass đi trước một bước vị sự kế thừa Mixins cùng Selector khác biệt.

chuyển động

Cả Sass cùng LESS đều hoàn toàn 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 hiệu 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ị ko tương thích: "%" cùng "px" * / ÍT HƠN


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 ko tương đương, yêu cầu sẽ trả về lỗi. Mang dù, tôi thực sự hy vọng rằng nó rất có thể là một cái nào đấy như 10px - 10% = 9px.

thông tin lỗi

Thông báo lỗi là đặc biệt quan trọng để xem hầu hết gì shop chúng tôi đang làm cho sai. Hãy tưởng tượng hàng chục ngàn dòng mã và một chút ít lỗi nhỏ tuổi ở nơi nào đó trong sự lếu láo loạn. Rõ ràng thông tin lỗi sẽ là cách rất tốt để tìm ra vụ namlinhchihoasen.comệc một biện pháp nhanh chóng.

Sass: Trong lấy ví dụ như này, tôi chỉ thực hiện Dấu nhắc lệnh để chạy trình biên dịch. Sass sẽ khởi tạo ra một thông báo lỗi bất cứ lúc nào có sự vô hiệu hóa trong mã. Trong trường hòa hợp này, cửa hàng chúng tôi sẽ xóa một dấu chấm phẩy trên dòng 6 và vấn đề đó sẽ đưa sang một lỗi. Hãy nhìn vào ảnh chụp screen dưới đây.

*

Khi tôi lần thứ nhất nhìn thấy thông báo này, tôi khó rất có thể hiểu nó. Xung quanh ra, có vẻ như Sass khá lạc lõng cùng với lỗi. Nó bảo rằng lỗi là bên trên dòng 7, thay bởi 6.

ÍT HƠN: với cùng 1 kịch bạn dạng lỗi, thông báo LESS được trình bày xuất sắc hơn cùng nó cũng đều có vẻ chính xác hơn. Hãy nhìn vào hình ảnh chụp màn hình hiển thị này:

*

Phần kết luận: LESS đem lại trải nghiệm giỏi hơn về vụ namlinhchihoasen.comệc này với chiến thắng.

Tài liệu

Tài liệu là 1 phần rất quan liêu trọng cho mỗi sản phẩm; trong cả những nhà phát triển dày dạn cũng sẽ gặp khó khăn khi có tác dụng những vấn đề mà không có Tài liệu.

Sass: Nếu chúng ta xem tư liệu tại trang web chính thức, cá nhân tôi, cảm thấy như bản thân đang trung tâm một thư namlinhchihoasen.comện, tài liệu vô cùng toàn diện. Tuy nhiên, giao diện, nếu điều đó đặc biệt với bạn, không phải là động lực nhằm đọc, cộng với nền là màu trắng trơn.

Bài thuyết trình y hệt như tài liệu W3 hoặc WikiPedia. Tôi trù trừ đây có phải là tiêu chuẩn hiển thị tài liệu trên internet không, nhưng lại đó không phải là bí quyết duy nhất.

ÍT HƠN: mặt khác, tài liệu LESS ví dụ hơn mà không cần quá nhiều phân tích và lý giải văn bản, cùng nó đi thẳng vào những ví dụ. Nó cũng có kiểu chữ tốt và phối màu giỏi hơn. Tôi nghĩ về rằng đây là lý do tại sao LESS hấp dẫn sự chú ý của tôi ngay từ trên đầu và tôi hoàn toàn 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 diễn tài liệu LESS tốt hơn, tuy vậy Sass có tài liệu toàn vẹn hơn, vày vậy tôi nghĩ chúng ta có thể gọi đấy là một sự ràng buộc.

Xem thêm: Hướng Dẫn Chụp Ảnh Xoá Phông Bằng Iphone 7, Chụp Ảnh Xóa Phông Trên Iphone

Suy suy nghĩ cuối cùng

Tôi nghĩ về đó là một trong kết luận cụ thể rằng Sass là giỏi hơn với toàn bô điểm là 5 so với 3 mang lại BÀI HỌC. Mặc dù nhiên, điều này không có nghĩa là ÍT là xấu; họ chỉ namlinhchihoasen.comệc trở nên xuất sắc hơn Cuối cùng, vẫn là ra quyết định của người tiêu dùng cuối nhằm chọn bộ tiền xử lý mà họ chọn. Rất có thể là Sass hoặc LESS, miễn là chúng ta cảm thấy dễ chịu và năng suất hơn, thì sẽ là người thành công trong danh sách của họ.

Cuối cùng, nếu như khách hàng có điều gì đó trong đầu về chủ thể này, vui lòng chia sẻ nó trong hộp comment bên dưới.