น้อย - ใช้น้อยลงในเบราว์เซอร์
ใช้น้อยลงในเบราว์เซอร์เมื่อคุณต้องการรวบรวมไฟล์ 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 โดยที่ไฟล์ที่น้อยกว่าทั้งหมดจะไม่ถูกดึงกลับมาอีก