น้อย - ใช้น้อยลงในเบราว์เซอร์

ใช้น้อยลงในเบราว์เซอร์เมื่อคุณต้องการรวบรวมไฟล์ Less แบบไดนามิกเมื่อจำเป็นและไม่ได้อยู่บนเซิร์ฟเวอร์ เนื่องจากมีไฟล์จาวาสคริปต์ขนาดใหญ่น้อยกว่า

ในการเริ่มต้นเราต้องเพิ่มสคริปต์ LESS เพื่อใช้ LESS ในเบราว์เซอร์ -

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

หากต้องการค้นหาแท็กสไตล์บนหน้าเราจำเป็นต้องเพิ่มบรรทัดต่อไปนี้ในหน้า นอกจากนี้ยังสร้างแท็กสไตล์ด้วย css ที่คอมไพล์แล้ว

<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>

การตั้งค่าตัวเลือก

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

ตัวอย่างเช่นเราสามารถกำหนด option ได้ดังนี้ -

<script>
   less = {
      env: "development"
   };
</script>

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

นอกจากนี้เรายังสามารถตั้งค่าตัวเลือกในรูปแบบอื่นบนแท็กสคริปต์ตามที่ระบุด้านล่าง -

<script>
   less = {
      env: "development"
   };
</script>

<script src = "less.js" data-env = "development"></script>

คุณยังสามารถเพิ่มตัวเลือกเหล่านี้ลงในแท็กลิงก์

<link data-dump-line-numbers = "all" 
   data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }' 
   rel = "stylesheet/less" type = "text/css" href = "less/style.less">

ประเด็นที่ต้องพิจารณาสำหรับตัวเลือกแอตทริบิวต์ ได้แก่ -

  • window.less <script tag <link tagคือระดับความสำคัญ

  • ไม่สามารถเขียนแอตทริบิวต์ข้อมูลในกรณีอูฐ ตัวเลือกแท็กลิงก์จะแสดงเป็นตัวเลือกเวลา

  • แอตทริบิวต์ข้อมูลที่มีค่าที่ไม่ใช่สตริงควรเป็น JSON ที่ถูกต้อง

โหมดนาฬิกา

สามารถเปิดใช้งานโหมดนาฬิกาได้โดยตั้งค่าตัวเลือก env เพื่อพัฒนาและเรียกใช้less.watch ()หลังจากเพิ่มไฟล์ less.js หากคุณต้องการให้โหมดนาฬิกาเปิดใช้งานชั่วคราวให้เพิ่ม#! watchลงใน URL

<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>

ปรับเปลี่ยนตัวแปร

เปิดใช้งานการแก้ไขเวลาเรียกใช้ของตัวแปร LESS ไฟล์ LESS ถูกคอมไพล์ใหม่เมื่อมีการเรียกค่าใหม่ รหัสต่อไปนี้แสดงการใช้งานพื้นฐานของตัวแปรแก้ไข -

less.modifyVars({
   '@buttonFace': '#eee',
   '@buttonText': '#fff'
});

การแก้จุดบกพร่อง

เราสามารถเพิ่มตัวเลือก! dumpLineNumbers: mediaqueryไปยังตัวเลือกurl หรือdumpLineNumbersตามที่กล่าวไว้ข้างต้น mediaqueryตัวเลือกที่สามารถใช้กับ FireLESS (มันแสดงต้นฉบับน้อยชื่อไฟล์และสายจำนวนรูปแบบ CSS น้อยสร้าง.)

ตัวเลือก

ก่อนโหลดไฟล์สคริปต์ less.js ต้องตั้งค่าอ็อพชันในอ็อบเจ็กต์global less

<script>
   less = {
      env: "development",
      logLevel: 2,
      async: false,
      fileAsync: false,
      poll: 1000,
      functions: {},
      dumpLineNumbers: "comments",
      relativeUrls: false,
      globalVars: {
         var1: '"string value"',
         var2: 'regular value'
      },
      rootpath: ":/a.com/"
   };
</script>

<script src = "less.js"></script>
  • async- เป็นประเภทบูลีน ไฟล์ที่นำเข้าจะถูกร้องขอไม่ว่าจะมีอ็อพชัน async หรือไม่ก็ตาม โดยค่าเริ่มต้นจะเป็นเท็จ

  • dumpLineNumbers- เป็นประเภทสตริง ในไฟล์ css เอาต์พุตข้อมูลรายการต้นทางจะถูกเพิ่มเมื่อตั้งค่า dumpLineNumbers ช่วยในการดีบักกฎที่มาจาก

  • env- เป็นประเภทสตริง env อาจดำเนินการในการพัฒนาหรือการผลิต การพัฒนาจะถูกตั้งค่าโดยอัตโนมัติเมื่อ URL ของเอกสารเริ่มต้นด้วยfile:// หรือมีอยู่ในเครื่องของคุณ

  • errorReporting - เมื่อการคอมไพล์ล้มเหลวสามารถตั้งค่าวิธีการรายงานข้อผิดพลาดได้

  • fileAsync- เป็นประเภทบูลีน เมื่อเพจมีโปรโตคอลไฟล์ก็สามารถร้องขอว่าจะนำเข้าแบบอะซิงโครนัสหรือไม่

  • functions - เป็นประเภทวัตถุ

  • logLevel- เป็นประเภทตัวเลข จะแสดงระดับการบันทึกในคอนโซลจาวาสคริปต์

    • 2: ข้อมูลและข้อผิดพลาด

    • 1: ข้อผิดพลาด

    • 0: ไม่มีอะไร

  • poll- ในโหมดนาฬิกาเวลาจะแสดงเป็นมิลลิวินาทีระหว่างการสำรวจ เป็นประเภทจำนวนเต็ม โดยค่าเริ่มต้นจะตั้งค่าเป็น 1,000

  • relativeUrls- URL ปรับให้สัมพันธ์กัน โดยค่าเริ่มต้นตัวเลือกนี้ถูกตั้งค่าเป็นเท็จ ซึ่งหมายความว่า URL นั้นสัมพันธ์กับไฟล์รายการน้อยอยู่แล้ว เป็นประเภทบูลีน

  • globalVars- แทรกรายการตัวแปรส่วนกลางลงในโค้ด ตัวแปรประเภทสตริงควรรวมอยู่ในเครื่องหมายคำพูด

  • modifyVars- ไม่เหมือนกับตัวเลือกตัวแปรส่วนกลาง มันย้ายการประกาศที่ท้ายไฟล์น้อยของคุณ

  • rootpath - กำหนดเส้นทางที่จุดเริ่มต้นของทรัพยากร URL ทั้งหมด

  • useFileCache- ใช้ต่อแคชไฟล์เซสชัน แคชในไฟล์ที่น้อยกว่าจะใช้ในการเรียก modifiedVars โดยที่ไฟล์ที่น้อยกว่าทั้งหมดจะไม่ถูกดึงกลับมาอีก