น้อย - การติดตั้ง

ในบทนี้เราจะเข้าใจวิธีการติดตั้ง LESS แบบทีละขั้นตอน

ข้อกำหนดของระบบสำหรับ LESS

Operating System - ข้ามแพลตฟอร์ม
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari

การติดตั้ง LESS

ตอนนี้ให้เราเข้าใจการติดตั้ง LESS

Step 1 - เราต้องการ NodeJsเพื่อเรียกใช้ LESS ตัวอย่าง หากต้องการดาวน์โหลด NodeJs ให้เปิดลิงก์https://nodejs.org/en/คุณจะเห็นหน้าจอดังที่แสดงด้านล่าง -

dowload คุณสมบัติล่าสุดรุ่นของแฟ้มซิป

Step 2- เรียกใช้การตั้งค่าเพื่อติดตั้งNode.jsบนระบบของคุณ

Step 3- ถัดไปติดตั้ง LESS บนเซิร์ฟเวอร์ผ่าน NPM (Node Package Manager) รันคำสั่งต่อไปนี้ในพรอมต์คำสั่ง

npm install -g less

Step 4 - หลังจากติดตั้ง LESS สำเร็จคุณจะเห็นบรรทัดต่อไปนี้บนพรอมต์คำสั่ง -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆของ LESS

สวัสดี. htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

ให้เราสร้างไฟล์style.lessซึ่งค่อนข้างคล้ายกับ CSS ที่แตกต่างก็คือว่ามันจะถูกบันทึกไว้ด้วย.lessขยาย ควรสร้างทั้งไฟล์. htmlและ. lessภายในโฟลเดอร์nodejs.

style.less

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

คอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

เมื่อคุณเรียกใช้คำสั่งดังกล่าวระบบจะสร้างไฟล์ style.cssโดยอัตโนมัติ เมื่อใดก็ตามที่คุณเปลี่ยนไฟล์ LESS จำเป็นต้องเรียกใช้คำสั่งด้านบนในไฟล์cmdจากนั้นไฟล์ style.cssจะได้รับการอัปเดต

style.cssไฟล์จะมีรหัสต่อไปนี้เมื่อคุณเรียกใช้คำสั่งดังกล่าว -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

เอาต์พุต

ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

บันทึกรหัส html ด้านบนในไฟล์ hello.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น