น้อย - ปลั๊กอิน

ในบทนี้เราจะทำความเข้าใจว่าปลั๊กอินสามารถอัปโหลดเพื่อขยายการทำงานของไซต์ได้อย่างไร ปลั๊กอินสามารถใช้เพื่อทำให้งานของคุณง่ายขึ้น

บรรทัดคำสั่ง

ในการติดตั้งปลั๊กอินโดยใช้บรรทัดคำสั่งก่อนอื่นคุณต้องติดตั้งปลั๊กอิน lessc สามารถติดตั้งปลั๊กอินได้โดยใช้ปลั๊กอินน้อยในตอนเริ่มต้น บรรทัดคำสั่งต่อไปนี้จะช่วยคุณติดตั้งปลั๊กอิน clean-css -

npm install less-plugin-clean-css

โดยตรงคุณสามารถใช้ปลั๊กอินที่ติดตั้งโดยใช้คำสั่งต่อไปนี้ -

lessc --plugin = path_to_plugin = options

การใช้ปลั๊กอินในรหัส

ในโหนดจำเป็นต้องใช้ปลั๊กอินและส่งผ่านในอาร์เรย์เป็นปลั๊กอินตัวเลือกไปยังส่วนที่น้อยกว่า

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

ในเบราว์เซอร์

ก่อนสคริปต์ less.js ผู้สร้างปลั๊กอินควรรวมไฟล์ javascript ไว้ในหน้า

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

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

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

รายการปลั๊กอินน้อย

ตารางต่อไปนี้แสดงรายการปลั๊กอินที่มีอยู่ใน LESS

Postprocessor / Feature Plugins

ซีเนียร์ ปลั๊กอินและคำอธิบาย
1 Autoprefixer

ใช้เพื่อเพิ่มคำนำหน้าให้กับ CSS หลังการแปลจาก LESS

2 CSScomb

ช่วยปรับปรุงการบำรุงรักษาสไตล์ชีตของคุณ

3 สะอาด css

ลดขนาดเอาต์พุต CSS จาก LESS

4 CSSWring

บีบอัดหรือย่อขนาดเอาต์พุต CSS จาก LESS

5 css- พลิก

ใช้เพื่อสร้าง CSS จากซ้ายไปขวา (LTR) หรือขวาไปซ้าย (RTL)

6 ฟังก์ชั่น

มันเขียนฟังก์ชันของ LESS ใน LESS เอง

7 ลูกโลก

ใช้เพื่อนำเข้าไฟล์หลายไฟล์

8 กลุ่ม css สื่อแบบสอบถาม

ดำเนินการหลังการประมวลผลสำหรับ Less

9 URL แบบอินไลน์

แปลง URL เป็น data uri โดยอัตโนมัติ

10 npm นำเข้า

นำเข้าจากแพ็คเกจ npm น้อยกว่า

11 ขอร้อง

ใช้เพื่อโพสต์โปรเซสน้อยลง

12 rtl

LESS ถูกย้อนกลับจาก ltr (ซ้ายไปขวา) เป็น rtl (ขวาไปซ้าย)

ผู้นำเข้ากรอบ / ไลบรารี

ซีเนียร์ ผู้นำเข้าและรายละเอียด
1 Bootstrap

Bootstrap โค้ด LESS จะถูกนำเข้าก่อนโค้ด LESS ที่กำหนดเอง

2 แก้ไข Bower

ไฟล์ LESS ถูกนำเข้าจากแพ็คเกจ Bower

3 Cardinal CSS สำหรับ less.js

ก่อนรหัส LESS ที่กำหนดเองรหัส LESS สำหรับ Cardinal จะถูกนำเข้า

4 ตาราง Flexbox

ผู้นำเข้า Framework หรือไลบรารีที่นำเข้ามากที่สุด

5 ระบบกริดที่ยืดหยุ่น

นำเข้าระบบ Flexible Grid

6 ไอออนิก

มันนำเข้ากรอบไอออนิก

7 Lesshat

นำเข้าส่วนผสมของ Lesshat

8 โครงกระดูก

มันนำเข้ารหัสโครงกระดูกน้อย

ไลบรารีฟังก์ชัน

ซีเนียร์ ผู้นำเข้าและรายละเอียด
1 ฟังก์ชันสีขั้นสูง

ใช้เพื่อค้นหาสีที่ตัดกันมากขึ้น

2 คิวบ์เฮลิกซ์

การใช้ค่าการแก้ไขแกมมาเท่ากับ 1 ฟังก์ชันคิวบ์เฮลิกซ์สามารถส่งคืนสีระหว่างสองสี

3 รายการ

รายการนี้แสดงไลบรารีฟังก์ชันการจัดการ

สำหรับผู้เขียนปลั๊กอิน

LESS อนุญาตให้ผู้เขียนรวมกับน้อยกว่า

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager ให้ผู้ถือซึ่งสามารถเพิ่มตัวจัดการไฟล์โพสต์โปรเซสเซอร์หรือผู้เยี่ยมชม

  • setOptions ฟังก์ชันส่งผ่านสตริง

  • printUsage ฟังก์ชันใช้เพื่ออธิบายตัวเลือก