LESS - Plugin

Trong chương này, chúng ta sẽ hiểu cách một Plugin có thể được tải lên để mở rộng chức năng của trang web. Các plugin có thể được sử dụng để giúp công việc của bạn dễ dàng hơn.

Dòng lệnh

Để cài đặt plugin bằng dòng lệnh, trước tiên bạn cần cài đặt plugin lessc. Plugin có thể được cài đặt bằng cách sử dụng ít plugin ngay từ đầu. Dòng lệnh sau sẽ giúp bạn cài đặt plugin clean-css -

npm install less-plugin-clean-css

Trực tiếp, bạn có thể sử dụng plugin đã cài đặt bằng cách sử dụng lệnh sau:

lessc --plugin = path_to_plugin = options

Sử dụng một plugin trong mã

Trong Node, plugin là bắt buộc và nó được chuyển vào một mảng dưới dạng một plugin tùy chọn.

var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
   .then(function(output) {
   },
   function(error) {
   });

Trong trình duyệt

Trước tập lệnh less.js, tác giả plugin nên đưa tệp javascript vào trang.

<script src = "plugin.js"></script>

<script>
less = {
   plugins: [plugin]
};
</script>

<script src = "less.min.js"></script>

Danh sách ít plugin hơn

Bảng sau liệt kê các plugin có sẵn trong LESS.

Postprocessor / Feature Plugins

Sr.No. Plugin & Mô tả
1 Trình sửa lỗi tự động

Nó được sử dụng để thêm tiền tố vào CSS sau khi dịch từ LESS.

2 CSScomb

Nó giúp cải thiện việc duy trì biểu định kiểu của bạn.

3 sạch sẽ

Nó thu nhỏ đầu ra CSS từ LESS.

4 CSSWring

Nó nén hoặc giảm thiểu đầu ra CSS từ LESS.

5 css-flip

Nó được sử dụng để tạo CSS từ trái sang phải (LTR) hoặc từ phải sang trái (RTL).

6 chức năng

Nó viết hàm của LESS trong chính LESS.

7 quả cầu

Nó được sử dụng để nhập nhiều tệp.

số 8 group-css-media-queries

Nó thực hiện xử lý hậu kỳ cho Ít hơn.

9 url nội tuyến

Tự động chuyển đổi URL thành dữ liệu uri.

10 npm-import

Nó nhập từ gói npm với giá thấp hơn.

11 làm hài lòng

Nó được sử dụng để xử lý ít hơn.

12 rtl

LESS được đảo ngược từ ltr (trái sang phải) thành rtl (từ phải sang trái).

Trình nhập Khung / Thư viện

Sr.No. Nhà nhập khẩu & Mô tả
1 Bootstrap

Mã Bootstrap LESS được nhập trước mã LESS tùy chỉnh.

2 Bower Resolve

LESS tệp được nhập từ các gói Bower.

3 Cardinal CSS cho less.js

Trước mã LESS tùy chỉnh, mã LESS cho Cardinal được nhập.

4 Lưới Flexbox

Framework được nhập phổ biến nhất hoặc trình nhập thư viện.

5 Hệ thống lưới linh hoạt

Nó nhập Hệ thống lưới linh hoạt.

6 Ionic

Nó nhập khuôn khổ ion.

7 Lesshat

Nó nhập các mixin Lesshat.

số 8 Bộ xương

Nó nhập ít mã khung hơn.

Thư viện chức năng

Sr.No. Nhà nhập khẩu & Mô tả
1 chức năng màu nâng cao

Nó được sử dụng để tìm các màu tương phản hơn.

2 cubehelix

Sử dụng giá trị hiệu chỉnh gamma là 1, hàm lập phương có thể trả về một màu giữa hai màu.

3 danh sách

Điều này liệt kê thư viện hàm thao tác.

Dành cho tác giả plugin

LESS cho phép một tác giả kết hợp với ít hơn.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager cung cấp một chủ sở hữu có thể thêm người quản lý tệp, người xử lý bài đăng hoặc khách truy cập.

  • setOptions hàm truyền chuỗi.

  • printUsage được sử dụng để giải thích các tùy chọn.