น้อย - คู่มือฉบับย่อ

LESS เป็นตัวประมวลผลล่วงหน้า CSS ที่เปิดใช้งานสไตล์ชีตที่ปรับแต่งได้จัดการและนำกลับมาใช้ใหม่ได้สำหรับเว็บไซต์ LESS เป็นภาษาสไตล์ชีตไดนามิกที่ขยายความสามารถของ CSS LESS ยังเป็นมิตรกับเบราว์เซอร์ข้าม

CSS Preprocessor เป็นภาษาสคริปต์ที่ขยาย CSS และรวบรวมเป็นไวยากรณ์ CSS ปกติเพื่อให้เว็บเบราว์เซอร์ของคุณอ่านได้ มันมีฟังก์ชันเช่นตัวแปร , ฟังก์ชั่น , mixinsและการดำเนินงานที่ช่วยให้คุณสามารถสร้าง CSS แบบไดนามิก

ทำไมน้อยกว่า?

ตอนนี้ให้เราเข้าใจว่าเหตุใดเราจึงใช้ LESS

  • LESS รองรับการสร้าง CSS ที่สะอาดกว่าและใช้งานข้ามเบราว์เซอร์ได้เร็วและง่ายขึ้น

  • LESS ได้รับการออกแบบใน JavaScript และยังสร้างขึ้นเพื่อใช้ในการถ่ายทอดสดซึ่งรวบรวมได้เร็วกว่าตัวประมวลผลล่วงหน้า CSS อื่น ๆ

  • LESS ช่วยให้โค้ดของคุณอยู่ในรูปแบบโมดูลาร์ซึ่งมีความสำคัญมากโดยทำให้อ่านง่ายและเปลี่ยนแปลงได้ง่าย

  • การบำรุงรักษาได้เร็วขึ้นสามารถทำได้โดยการใช้น้อยตัวแปร

ประวัติศาสตร์

LESS ออกแบบโดย Alexis Sellierในปี 2009 LESS เป็นโอเพ่นซอร์ส รุ่นแรกของ LESS เขียนด้วย Ruby; ในเวอร์ชันหลัง ๆ การใช้ Ruby ถูกแทนที่ด้วย JavaScript

คุณสมบัติ

  • สามารถเขียนโค้ดที่สะอาดและอ่านง่ายขึ้นอย่างเป็นระบบ

  • เราสามารถกำหนดรูปแบบและสามารถใช้ซ้ำได้ตลอดทั้งรหัส

  • LESS ใช้ JavaScript และเป็นชุด CSS ขั้นสูง

  • LESS เป็นเครื่องมือที่มีความว่องไวในการแยกแยะปัญหาความซ้ำซ้อนของโค้ด

ข้อดี

  • LESS สร้าง CSS ที่ทำงานบนเบราว์เซอร์ได้อย่างง่ายดาย

  • LESS ช่วยให้คุณเขียนโค้ดได้ดีขึ้นและมีการจัดระเบียบอย่างดีโดยใช้การซ้อนกัน

  • การบำรุงรักษาสามารถทำได้เร็วขึ้นโดยใช้ตัวแปร

  • LESS ช่วยให้คุณสามารถใช้ซ้ำทั้งชั้นเรียนได้อย่างง่ายดายโดยอ้างถึงในชุดกฎของคุณ

  • LESS ให้การใช้งานที่ทำให้การเข้ารหัสเร็วขึ้นและประหยัดเวลา

ข้อเสีย

  • ต้องใช้เวลาในการเรียนรู้ว่าคุณยังใหม่กับการประมวลผลล่วงหน้า CSS หรือไม่

  • เนื่องจากการเชื่อมต่อที่แน่นหนาระหว่างโมดูลควรใช้ความพยายามมากขึ้นในการใช้ซ้ำและ / หรือทดสอบโมดูลที่ขึ้นอยู่กับ

  • น้อยมีกรอบน้อยเมื่อเทียบกับ preprocessor เก่าเช่น SASS ซึ่งประกอบด้วยกรอบเข็มทิศ , แรงโน้มถ่วงและSusy

ในบทนี้เราจะเข้าใจวิธีการติดตั้ง 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

hello.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 นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

เป็นกลุ่มของคุณสมบัติ CSS ที่อนุญาตให้ใช้คุณสมบัติของคลาสหนึ่งในคลาสอื่นและรวมชื่อคลาสเป็นคุณสมบัติ ใน LESS คุณสามารถประกาศ mixin ในลักษณะเดียวกับสไตล์ CSS โดยใช้ class หรือ id selector สามารถเก็บค่าได้หลายค่าและสามารถใช้ซ้ำในรหัสได้ทุกเมื่อที่จำเป็น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้กฎที่ซ้อนกันในไฟล์ LESS -

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

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

lessc style.less style.css

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

style.css

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ nested_rules.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

คุณสามารถซ้อนคำสั่งเช่นสื่อและคีย์เฟรมในลักษณะเดียวกันกับวิธีที่คุณซ้อนตัวเลือก คุณสามารถวางคำสั่งไว้ด้านบนและองค์ประกอบสัมพัทธ์จะไม่ถูกเปลี่ยนแปลงภายในชุดกฎ สิ่งนี้เรียกว่ากระบวนการทำให้เป็นฟอง

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คำสั่งที่ซ้อนกันและการทำฟองในไฟล์ LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ถัดไปสร้างไฟล์style.less

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

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

lessc style.less style.css

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

style.css

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ nested_directives_bubbling.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

LESS ให้การสนับสนุนสำหรับการคำนวณทางคณิตศาสตร์บางอย่างเช่นบวก (+) ลบ (-) การคูณ (*) และการหาร (/) และสามารถทำงานกับตัวเลขสีหรือตัวแปรใดก็ได้ การดำเนินการช่วยประหยัดเวลาได้มากเมื่อคุณใช้ตัวแปรและคุณรู้สึกอยากทำงานคณิตศาสตร์ง่ายๆ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การดำเนินการในไฟล์ LESS -

<html>
   <head>
      <title>Less Operations</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Operations</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ถัดไปสร้างไฟล์style.less

style.less

@fontSize: 10px;
.myclass {
   font-size: @fontSize * 2;
   color:green;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ operations.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

สร้างตัวเลือกแบบไดนามิกและใช้คุณสมบัติหรือค่าตัวแปรเป็นสตริงที่กำหนดเอง

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ Escape ในไฟล์ LESS -

<html>
   <head>
      <title>Less Escaping</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Escaping</h1>
      <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

p {
   color: ~"green";
}

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

lessc style.less style.css

ดำเนินการคำสั่งด้านบนมันจะสร้างไฟล์ style.css โดยอัตโนมัติด้วยรหัสต่อไปนี้ -

style.css

p {
   color: green;
}

สิ่งที่เขียนภายใน~ "some_text"จะแสดงเป็นsome_textหลังจากรวบรวมโค้ด LESS เป็นโค้ด CSS

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ escaping.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

LESS แมปโค้ด JavaScript ด้วยการจัดการค่าและใช้ฟังก์ชันที่กำหนดไว้ล่วงหน้าเพื่อจัดการองค์ประกอบ HTML ในสไตล์ชีต มีฟังก์ชั่นต่างๆในการปรับแต่งสีเช่นฟังก์ชันกลมฟังก์ชันพื้นฟังก์ชันเพดานฟังก์ชันเปอร์เซ็นต์เป็นต้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ฟังก์ชันในไฟล์ LESS -

<html>
   <head>
      <title>Less Functions</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Functions</h1>
      <p class = "mycolor">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

@color: #FF8000;
@width:1.0;
.mycolor {
   color: @color;
   width: percentage(@width);
}

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

lessc style.less style.css

ตอนนี้ดำเนินการคำสั่งด้านบน มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -

style.css

.mycolor {
   color: #FF8000;
   width: 100%;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ functions.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ซึ่งแสดงขึ้นคุณจะได้รับผลลัพธ์ต่อไปนี้

คำอธิบาย

เนมสเปซใช้เพื่อจัดกลุ่มมิกซ์อินภายใต้ชื่อสามัญ การใช้เนมสเปซคุณสามารถหลีกเลี่ยงความขัดแย้งในชื่อและห่อหุ้มกลุ่มมิกซ์อินจากภายนอกได้

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เนมสเปซและตัวเข้าถึงในไฟล์ LESS -

<html>
   <head>
      <title>Less Namespaces and Accessors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Namespaces and Accessors</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ namespaces_accessors.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

ขอบเขตตัวแปรระบุตำแหน่งของตัวแปรที่มี ตัวแปรจะถูกค้นหาจากขอบเขตโลคัลและหากไม่พร้อมใช้งานคอมไพลเลอร์จะค้นหาจากขอบเขตหลัก

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เนมสเปซและตัวเข้าถึงในไฟล์ LESS -

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

@var: @a;
@a: 15px;

.myclass {
   font-size: @var;
   @a:20px;
   color: green;
}

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

lessc style.less style.css

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

style.css

.myclass {
   font-size: 20px;
   color: green;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ scope.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

ความคิดเห็นทำให้รหัสชัดเจนและเข้าใจได้สำหรับผู้ใช้ คุณสามารถใช้ได้ทั้งสไตล์บล็อกและความคิดเห็นแบบอินไลน์ในโค้ด แต่เมื่อคุณรวบรวมโค้ด LESS ความคิดเห็นบรรทัดเดียวจะไม่ปรากฏในไฟล์ CSS

ตัวอย่าง

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

<html>
   <head>
      <title>Less Comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Comments</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

/* It displays the
green color! */
.myclass {
   color: green;
}

// It displays the blue color
.myclass1 {
   color: red;
}

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

lessc style.less style.css

ตอนนี้ดำเนินการคำสั่งด้านบน มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -

style.css

/* It displays the
green color! */
.myclass {
   color: green;
}

.myclass1 {
   color: red;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ comments.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

ใช้เพื่อนำเข้าเนื้อหาของไฟล์ LESS หรือ CSS

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การนำเข้าในไฟล์ LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

ตอนนี้สร้างไฟล์myfile.less

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

ตอนนี้สร้างไฟล์style.less

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

myfile.lessไฟล์ซึ่งจะถูกนำเข้ามาในstyle.lessจากเส้นทางhttps://www.tutorialspoint.com/less/myfile.less

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

lessc style.less style.css

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

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ importing.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ในบทนี้เราจะพูดถึงตัวแปรใน LESS LESS อนุญาตให้กำหนดตัวแปรด้วยสัญลักษณ์ @ การกำหนดตัวแปรทำได้ด้วยcolon(:).

ตารางต่อไปนี้แสดงการใช้ตัวแปร LESS โดยละเอียด

ซีเนียร์ การใช้งานตัวแปรและคำอธิบาย
1 ภาพรวม

การซ้ำซ้อนของค่าเดียวกันหลายครั้งสามารถหลีกเลี่ยงได้โดยการใช้งานของตัวแปร

2 การแก้ไขตัวแปร

ตัวแปรนี้ยังสามารถนำมาใช้ในสถานที่อื่น ๆ เช่นชื่อตัวเลือก , ชื่อคุณสมบัติ , URLและ@importงบ

3 ชื่อตัวแปร

เราสามารถกำหนดตัวแปรด้วยชื่อตัวแปรที่ประกอบด้วยค่า

4 ขี้เกียจโหลด

ในการโหลดแบบขี้เกียจสามารถใช้ตัวแปรได้แม้ว่าจะไม่เป็นเช่นนั้นก็ตาม

5 ตัวแปรเริ่มต้น

ตัวแปรเริ่มต้นมีความสามารถในการตั้งค่าตัวแปรก็ต่อเมื่อยังไม่ได้ตั้งค่า ไม่จำเป็นต้องใช้คุณลักษณะนี้เนื่องจากสามารถแทนที่ตัวแปรได้อย่างง่ายดายโดยการกำหนดตัวแปรในภายหลัง

Extend เป็นคลาสหลอกน้อยซึ่งขยายรูปแบบตัวเลือกอื่น ๆ ในตัวเลือกเดียวโดยใช้ :extend ตัวเลือก

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การขยายในไฟล์ LESS -

expand_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

คุณสามารถรวบรวมextend.lessไฟล์extend.cssโดยใช้คำสั่งดังต่อไปนี้ -

lessc style.less style.css

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

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ extend_syntax.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ขยายไวยากรณ์

Extend ถูกวางไว้ในชุดกฎหรือแนบกับตัวเลือก คล้ายกับคลาสหลอกที่มีหนึ่งคลาสขึ้นไปซึ่งคั่นด้วยลูกน้ำ ใช้คีย์เวิร์ดที่ไม่บังคับallสามารถติดตามตัวเลือกแต่ละรายการได้

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไวยากรณ์ส่วนขยายในไฟล์ LESS -

expand_syntax.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

lessc style.less style.css

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

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ extend_syntax.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ตารางต่อไปนี้แสดงประเภทของไวยากรณ์ส่วนขยายทั้งหมดที่คุณสามารถใช้ได้ใน LESS -

ซีเนียร์ ประเภทและคำอธิบาย
1 ขยายสิ่งที่แนบมากับตัวเลือก

Extend เชื่อมต่อกับตัวเลือกซึ่งมีลักษณะคล้ายกับคลาสหลอกโดยมีตัวเลือกเป็นพารามิเตอร์

2 ขยายชุดกฎภายใน

&:extend(selector) ไวยากรณ์สามารถใส่ไว้ในเนื้อความของชุดกฎ

3 การขยายตัวเลือกที่ซ้อนกัน

ตัวเลือกที่ซ้อนกันจะจับคู่โดยใช้ตัวเลือกขยาย

4 การจับคู่ที่แน่นอนกับ Extend

โดยค่าเริ่มต้น, extend ค้นหาการจับคู่ที่ตรงกันระหว่างตัวเลือก

5 นิพจน์ที่ n

รูปแบบของนิพจน์ที่ n มีความสำคัญในการขยายมิฉะนั้นถือว่าตัวเลือกต่างกัน

6 ขยาย "ทั้งหมด"

เมื่อคำหลักทั้งหมดถูกระบุในที่สุดในextend อาร์กิวเมนต์จากนั้น LESS จะจับคู่ตัวเลือกนั้นเป็นส่วนหนึ่งของตัวเลือกอื่น

7 Selector Interpolation with Extend

extend สามารถเชื่อมต่อกับตัวเลือก interpolated

8 กำหนดขอบเขต / ขยายด้านใน @media

ขยายตรงกับตัวเลือกเฉพาะที่มีอยู่ในการประกาศสื่อเดียวกัน

9 การตรวจจับการทำซ้ำ

ไม่สามารถตรวจพบการซ้ำกันของตัวเลือก

ต่อไปนี้เป็นประเภทของ Use Cases for Extend

ซีเนียร์ ประเภทและคำอธิบาย
1 กรณีการใช้งานแบบคลาสสิก

กรณีการใช้งานแบบคลาสสิกใช้เพื่อหลีกเลี่ยงการเพิ่มคลาสพื้นฐานใน LESS

2 การลดขนาด CSS

Extend ใช้เพื่อย้ายตัวเลือกไปให้ไกลที่สุดเท่าที่คุณสมบัติที่คุณต้องการใช้ สิ่งนี้ช่วยในการลดโค้ดที่สร้างโดย css

3 การผสมผสานสไตล์ / มิกซ์อินขั้นสูงเพิ่มเติม

การใช้การขยายเราสามารถรวมสไตล์เดียวกันของตัวเลือกเฉพาะเข้ากับตัวเลือกอื่น ๆ

Mixins คล้ายกับฟังก์ชันในภาษาโปรแกรม Mixins คือกลุ่มของคุณสมบัติ CSS ที่อนุญาตให้คุณใช้คุณสมบัติของคลาสหนึ่งสำหรับคลาสอื่นและมีชื่อคลาสเป็นคุณสมบัติ ใน LESS คุณสามารถประกาศ mixin ในลักษณะเดียวกับสไตล์ CSS โดยใช้ class หรือ id selector สามารถเก็บค่าได้หลายค่าและสามารถใช้ซ้ำในรหัสได้ทุกเมื่อที่จำเป็น

ตารางต่อไปนี้แสดงให้เห็นถึงการใช้มิกซ์อินน้อยโดยละเอียด

ซีเนียร์ การใช้งานและคำอธิบาย Mixins
1 ไม่เอาท์พุท Mixin

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

2 Selectors ใน Mixins

มิกซ์อินสามารถมีคุณสมบัติไม่เพียง แต่ยังมีตัวเลือกได้ด้วย

3 เนมสเปซ

เนมสเปซใช้เพื่อจัดกลุ่มมิกซ์อินภายใต้ชื่อสามัญ

4 Namespaces ที่ได้รับการปกป้อง

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

5 คำสำคัญ!

! สำคัญคำหลักที่จะใช้ในการแทนที่คุณสมบัติโดยเฉพาะอย่างยิ่ง

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตการใช้mixinsในไฟล์ LESS -

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>LESS Mixins</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <p class = "p1">LESS is a CSS pre-processor that enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
      <p class = "p3">LESS is cross browser friendly.</p>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

.p1 {
   color:red;
}

.p2 {
   background : #64d9c0;
   .p1();
}

.p3 {
   background : #LESS520;
  .p1;
}

คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

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

style.css

.p1 {
   color: red;
}

.p2 {
   background: #64d9c0;
   color: red;
}

.p3 {
   background: #LESS520;
   color: red;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ less_mixins.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

วงเล็บเป็นทางเลือกเมื่อเรียกมิกซ์อิน ในตัวอย่างข้างต้นทั้งสองคำสั่ง.p1(); และ .p1; ทำสิ่งเดียวกัน

คำอธิบาย

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

ตัวอย่างเช่นพิจารณาข้อมูลโค้ด LESS อย่างง่าย -

.border(@width; @style; @color) {
   border: @width @style @color;
}

.myheader {
   .border(2px; dashed; green);
}

ที่นี่เรากำลังใช้พาราเมตริกมิกซ์อินเป็น. border ที่มีพารามิเตอร์สามตัวคือความกว้างรูปแบบและสี เมื่อใช้พารามิเตอร์เหล่านี้คุณสามารถปรับแต่งเอาต์พุตมิกซ์อินด้วยค่าพารามิเตอร์ที่ส่งผ่าน

ตารางต่อไปนี้อธิบายประเภทต่างๆของส่วนผสมพาราเมตริกพร้อมกับคำอธิบาย

ซีเนียร์ ประเภทและคำอธิบาย
1 Mixins ที่มีหลายพารามิเตอร์

พารามิเตอร์สามารถแยกได้โดยใช้เครื่องหมายจุลภาคหรืออัฒภาค

2 พารามิเตอร์ที่มีชื่อ

Mixins ให้ค่าพารามิเตอร์แทนตำแหน่งโดยใช้ชื่อ

3 ตัวแปร @arguments

เมื่อมีการเรียกมิกซ์อิน @arguments จะรวมอาร์กิวเมนต์ที่ส่งผ่านทั้งหมด

4 อาร์กิวเมนต์ขั้นสูงและตัวแปร @rest

Mixin รับจำนวนอาร์กิวเมนต์โดยใช้ .....

5 การจับคู่รูปแบบ

เปลี่ยนพฤติกรรมของมิกซ์อินโดยส่งผ่านพารามิเตอร์ไป

ในบทนี้เราจะเข้าใจถึงความสำคัญของ Mixins as Functions. เช่นเดียวกับฟังก์ชัน mixins สามารถซ้อนกันสามารถยอมรับพารามิเตอร์และส่งคืนค่าได้เช่นกัน

ตารางต่อไปนี้แสดงการใช้มิกซ์อินเป็นฟังก์ชันในรายละเอียด

ซีเนียร์ การใช้งานและคำอธิบาย Mixins
1 ขอบเขตการผสม

ส่วนผสมประกอบด้วยตัวแปร สิ่งเหล่านี้สามารถใช้ในขอบเขตของผู้โทรและมองเห็นได้

2 ผสมและส่งคืนค่า

Mixins จะคล้ายกับฟังก์ชันและตัวแปรที่กำหนดไว้ใน mixin จะทำหน้าที่เป็นค่าส่งกลับ

3 Mixin ภายใน mixin อื่น

เมื่อใดก็ตามที่มีการกำหนดมิกซ์อินภายในมิกซ์อินอื่นก็สามารถใช้เป็นค่าส่งคืนได้เช่นกัน

คำอธิบาย

ชุดกฎที่แยกออกมีชุดกฎเช่นคุณสมบัติชุดกฎที่ซ้อนกันการประกาศตัวแปรมิกซ์อิน ฯลฯ จะถูกเก็บไว้ในตัวแปรและรวมไว้ในโครงสร้างอื่น คุณสมบัติทั้งหมดของชุดกฎจะถูกคัดลอกไปยังโครงสร้างนั้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการส่งชุดกฎไปยัง mixin ในไฟล์ LESS -

ผ่าน _ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

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

lessc style.less style.css

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

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ passing_ruleset.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

การกำหนดขอบเขต

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

ตารางต่อไปนี้แสดงประเภทของขอบเขตทั้งหมด -

ซีเนียร์ ประเภทและคำอธิบาย
1 ความหมายและการมองเห็นขอบเขตผู้โทร

ตัวแปรและมิกซ์อินถูกกำหนดไว้ภายในชุดกฎแยก

2 การอ้างอิงจะไม่แก้ไขขอบเขตชุดกฎที่แยกออกมา

เพียงแค่ให้การอ้างอิงชุดกฎก็ไม่สามารถเข้าถึงขอบเขตใหม่ ๆ ได้

3 การปลดล็อกจะแก้ไขขอบเขตชุดกฎที่แยกออกมา

ชุดกฎแยกสามารถเข้าถึงขอบเขตได้โดยการนำเข้า

คำอธิบาย

@importคำสั่งใช้เพื่อนำเข้าไฟล์ในโค้ด มันแพร่กระจายโค้ด LESS ไปยังไฟล์ต่างๆและช่วยให้สามารถรักษาโครงสร้างของโค้ดได้อย่างง่ายดาย คุณสามารถใส่คำสั่ง@importที่ใดก็ได้ในโค้ด

ตัวอย่างเช่นคุณสามารถนำเข้าไฟล์โดยใช้ @importคำหลัก@import "file_name.less"

นามสกุลไฟล์

คุณสามารถใช้คำสั่ง@importขึ้นอยู่กับนามสกุลไฟล์ต่างๆเช่น -

  • หากคุณใช้นามสกุล. cssมันจะถือว่าเป็น CSS และคำสั่ง@importจะยังคงอยู่เหมือนเดิม

  • หากมีนามสกุลอื่นจะถือว่าเป็น LESS และจะถูกนำเข้า

  • หากไม่มีนามสกุล LESS มันจะต่อท้ายและรวมเป็นไฟล์ LESS ที่นำเข้า

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวแปรในไฟล์ SCSS -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

จากนั้นสร้างไฟล์import_dir.less

import_dir.less

.myline {
   font-size: 20px;
}

ตอนนี้สร้างไฟล์style.less

style.less

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

import_dir.lessไฟล์จะได้รับนำเข้ามาในstyle.lessไฟล์จากเส้นทางhttps://www.tutorialspoint.com/less/import_dir.less.

คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

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

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ import_directives.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ในบทนี้เราจะเข้าใจถึงความสำคัญของ Import Optionsใน LESS LESS นำเสนอไฟล์@import คำสั่งที่อนุญาตให้สไตล์ชีตนำเข้าทั้งสไตล์ชีต LESS และ CSS

ตารางต่อไปนี้แสดงรายการคำสั่งการนำเข้าที่จะนำไปใช้ในคำสั่งนำเข้า

ซีเนียร์ นำเข้าตัวเลือกและคำอธิบาย
1 เอกสารอ้างอิง

ใช้ไฟล์ LESS เป็นข้อมูลอ้างอิงเท่านั้นและจะไม่ส่งออก

2 อินไลน์

ช่วยให้คุณสามารถคัดลอก CSS ของคุณไปยังเอาต์พุตโดยไม่ต้องประมวลผล

3 น้อยกว่า

มันจะถือว่าไฟล์ที่นำเข้าเป็นไฟล์ LESS ปกติแม้ว่าจะเป็นนามสกุลไฟล์ก็ตาม

4 css

มันจะถือว่าไฟล์ที่นำเข้าเป็นไฟล์ CSS ปกติแม้ว่าจะเป็นนามสกุลไฟล์ก็ตาม

5 ครั้งเดียว

มันจะนำเข้าไฟล์เพียงครั้งเดียว

6 หลาย

มันจะนำเข้าไฟล์หลายครั้ง

7 ไม่จำเป็น

คอมไพล์ต่อไปแม้ว่าจะไม่พบไฟล์ที่จะนำเข้าก็ตาม

อนุญาตให้ใช้คำหลักมากกว่าหนึ่งคำในไฟล์ @import อย่างไรก็ตามคุณต้องใช้เครื่องหมายจุลภาคเพื่อแยกคำหลัก

ตัวอย่างเช่น -

@import (less, optional) "custom.css";

คำอธิบาย

หากคุณต้องการจับคู่ค่าธรรมดาหรือจำนวนอาร์กิวเมนต์ในนิพจน์คุณสามารถใช้ยามได้ มีความเกี่ยวข้องกับการประกาศ mixin และรวมถึงเงื่อนไขที่แนบมากับ mixin มิกซ์อินแต่ละตัวจะมียามหนึ่งคนขึ้นไปซึ่งคั่นด้วยลูกน้ำ ต้องมียามอยู่ในวงเล็บ LESS ใช้มิกซ์อินที่มีการป้องกันแทนif/else คำสั่งและทำการคำนวณเพื่อระบุ mixin ที่ตรงกัน

ตารางต่อไปนี้อธิบายประเภทของการ์ดป้องกันมิกซ์อินประเภทต่างๆพร้อมคำอธิบาย

ซีเนียร์ ประเภทและคำอธิบาย
1 Guard Comparison Operators

คุณสามารถใช้ตัวดำเนินการเปรียบเทียบ (=) เพื่อเปรียบเทียบตัวเลขสตริงตัวระบุ ฯลฯ

2 Guard Logical Operators

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

3 พิมพ์ฟังก์ชันการตรวจสอบ

ประกอบด้วยฟังก์ชันในตัวเพื่อกำหนดประเภทค่าสำหรับการจับคู่มิกซ์อิน

4 ส่วนผสมตามเงื่อนไข

LESS ใช้ฟังก์ชันเริ่มต้นเพื่อจับคู่มิกซ์อินกับการจับคู่การผสมอื่น ๆ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ mixin guards ในไฟล์ LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

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

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ mixin-guard.html ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

Guards ใช้เพื่อจับคู่ค่าธรรมดาหรืออาร์กิวเมนต์จำนวนหนึ่งในนิพจน์ ใช้กับตัวเลือก CSS เป็นไวยากรณ์สำหรับการประกาศ mixin และเรียกใช้ทันที เพื่อนำไฟล์ifประเภทคำสั่ง; เข้าร่วมกับคุณลักษณะนี้&ซึ่งช่วยให้คุณจัดกลุ่มผู้คุมได้หลายคน

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ css ป้องกันในไฟล์ LESS -

css_guard.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

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

lessc style.less style.css

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

style.css

.style {
   background-color: blue;
   color: white;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ css_guard.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

ในบทนี้เราจะเข้าใจวิธีการทำงานของลูปใน LESS คำสั่งลูปช่วยให้เราดำเนินการคำสั่งหรือกลุ่มของคำสั่งได้หลายครั้ง สามารถสร้างโครงสร้างวนซ้ำ / วนซ้ำต่างๆได้เมื่อมิกซ์อินแบบวนซ้ำรวมกับGuard Expressions และ Pattern Matching.

ตัวอย่าง

ตัวอย่างต่อไปนี้สาธิตการใช้ลูปในไฟล์ LESS -

loop_example.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web. </p>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

.cont(@count) when (@count > 0) {
   .cont((@count - 1));
   width: (25px * @count);
}

div {
   .cont(7);
}

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

lessc style.less style.css

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

style.css

div {
   width: 25px;
   width: 50px;
   width: 75px;
   width: 100px;
   width: 125px;
   width: 150px;
   width: 175px;
}

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ loop_example.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

คำอธิบาย

คุณลักษณะนี้ใน LESS อนุญาตให้เพิ่มค่าลงในรายการที่คั่นด้วยจุลภาคหรือช่องว่างจากคุณสมบัติหลายรายการโดยใช้คุณสมบัติเดียว สามารถใช้สำหรับพื้นหลังและคุณสมบัติการแปลง

ตารางต่อไปนี้อธิบายถึงฟังก์ชันสองประเภทที่คุณลักษณะผสาน

ซีเนียร์ ประเภทและคำอธิบาย
1 จุลภาค

เป็นการเพิ่มมูลค่าทรัพย์สินในตอนท้าย

2 พื้นที่

เพิ่มมูลค่าทรัพย์สินด้วยช่องว่าง

ในบทนี้ให้เราเข้าใจวิธีการ Parent Selectorsงาน. เป็นไปได้ที่จะอ้างอิงตัวเลือกหลักโดยใช้&(ampersand) ตัวดำเนินการ ตัวเลือกหลักของกฎที่ซ้อนกันจะแสดงโดย& ตัวดำเนินการและใช้เมื่อใช้คลาสการปรับเปลี่ยนหรือคลาสหลอกกับตัวเลือกที่มีอยู่

ตารางต่อไปนี้แสดงประเภทของตัวเลือกหลัก -

ซีเนียร์ ประเภทและคำอธิบาย
1 หลาย &

& จะเป็นตัวแทนของตัวเลือกที่ใกล้ที่สุดและตัวเลือกหลักทั้งหมด

2 การเปลี่ยนลำดับตัวเลือก

การเลือกตัวเลือกล่วงหน้าไปยังตัวเลือกที่สืบทอด (พาเรนต์) มีประโยชน์เมื่อมีการเปลี่ยนแปลงลำดับตัวเลือก

3 Combinatorial Explosion

& ยังสามารถสร้างการเปลี่ยนแปลงที่เป็นไปได้ทั้งหมดของตัวเลือกในรายการโดยคั่นด้วยเครื่องหมายจุลภาค

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือกหลักในไฟล์ LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

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

lessc style.less style.css

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

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

ในตัวอย่างข้างต้น & หมายถึงตัวเลือก a.

เอาต์พุต

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

  • บันทึกรหัส html ด้านบนในไฟล์ parent_selector1.htm ไฟล์.

  • เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น

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

ฟังก์ชันอื่น ๆ ประกอบด้วยกลุ่มของฟังก์ชันที่แตกต่างกัน

ตารางต่อไปนี้แสดงรายการฟังก์ชันเบ็ดเตล็ดทุกประเภท -

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย
1 สี

เป็นสตริงที่แสดงถึงสี

2 ขนาดรูปภาพ

ใช้เพื่อตรวจสอบขนาดของภาพจากไฟล์

3 ภาพ - ความกว้าง

ตรวจสอบความกว้างของภาพจากไฟล์

4 ภาพ - ความสูง

จะตรวจสอบความสูงของภาพจากไฟล์

5 แปลง

จำนวนจะถูกแปลงจากหน่วยหนึ่งไปยังอีกหน่วยหนึ่ง

6 ข้อมูล - uri

Data uri เป็นสกีมาตัวระบุทรัพยากรที่เหมือนกัน (URI) ซึ่งรับทรัพยากรแบบอินไลน์บนหน้าเว็บ

7 ค่าเริ่มต้น

ฟังก์ชันเริ่มต้นจะคืนค่าจริงเฉพาะเมื่อพร้อมใช้งานภายในเงื่อนไขการป้องกันและไม่ตรงกับมิกซ์อินอื่น ๆ

8 หน่วย

ฟังก์ชันเริ่มต้นจะคืนค่าจริงเฉพาะเมื่อพร้อมใช้งานภายในเงื่อนไขการป้องกันและไม่ตรงกับมิกซ์อินอื่น ๆ

9 รับ - หน่วย

ฟังก์ชัน get - unit จะส่งกลับหน่วยที่อาร์กิวเมนต์แสดงด้วยตัวเลขและหน่วย

10 svg - ไล่ระดับสี

svg-gradient คือการเปลี่ยนสีหนึ่งไปเป็นอีกสีหนึ่ง สามารถเพิ่มหลายสีให้กับองค์ประกอบเดียวกัน

คำอธิบาย

Less รองรับฟังก์ชันสตริงบางอย่างตามรายการด้านล่าง -

  • escape
  • e
  • % รูปแบบ
  • replace

ตารางต่อไปนี้อธิบายฟังก์ชันสตริงข้างต้นพร้อมกับคำอธิบาย

ซีเนียร์ ประเภทและคำอธิบาย ตัวอย่าง
1

Escape

มันเข้ารหัสสตริงหรือข้อมูลโดยใช้การเข้ารหัส URL กับอักขระพิเศษ คุณไม่สามารถเข้ารหัสอักขระบางตัวเช่น, , / , ? , @ , & , + , ~ , ! , $ , ' และอักขระบางตัวที่คุณสามารถเข้ารหัสได้เช่น \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ และ =.

escape("Hello!! welcome to Tutorialspoint!")

ส่งออกสตริงที่หลีกเลี่ยงเป็น -

Hello%21%21%20welcome%20to%20Tutorialspoint%21
2

e

เป็นฟังก์ชันสตริงที่ใช้สตริงเป็นพารามิเตอร์และส่งกลับข้อมูลโดยไม่มีเครื่องหมายคำพูด มันคือการหลีกเลี่ยง CSS ซึ่งใช้~ "เนื้อหาบางส่วน"ค่าและตัวเลขที่ใช้เป็นพารามิเตอร์

filter: e("Hello!! welcome to Tutorialspoint!");

ส่งออกสตริงที่หลีกเลี่ยงเป็น -

filter: Hello!! welcome to Tutorialspoint!;
3

% format

ฟังก์ชันนี้จัดรูปแบบสตริง สามารถเขียนได้ในรูปแบบต่อไปนี้ -

%(string, arguments ...)
format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");

เอาต์พุตสตริงที่จัดรูปแบบเป็น -

format-a-d: "myvalues: 5 myfile: "mydir/less_demo.less"";
4

replace

ใช้เพื่อแทนที่ข้อความภายในสตริง ใช้พารามิเตอร์บางอย่าง -

  • string - ค้นหาสตริงและแทนที่ใน

  • pattern - ค้นหารูปแบบการแสดงออกปกติ

  • replacement - แทนที่สตริงที่ตรงกับรูปแบบ

  • flags - นี่คือแฟล็กนิพจน์ทั่วไปที่เป็นทางเลือก

replace("Welcome, val?", "val\?", "to Tutorialspoint!");

มันแทนที่สตริงเป็น -

"Welcome, to Tutorialspoint!"

คำอธิบาย

LESS ประกอบด้วยฟังก์ชันรายการที่ใช้เพื่อระบุความยาวของรายการและตำแหน่งของค่าในรายการ

ตารางต่อไปนี้แสดงรายการฟังก์ชันที่ใช้ใน LESS -

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย
1 ความยาว

จะใช้รายการค่าที่คั่นด้วยจุลภาคหรือเว้นวรรคเป็นพารามิเตอร์

2 สารสกัด

มันจะส่งคืนค่าในตำแหน่งที่ระบุในรายการ

คำอธิบาย

ฟังก์ชันทางคณิตศาสตร์ประกอบด้วยวิธีการที่ใช้ในการดำเนินการตัวเลขเช่นรอบรากที่สองค่ากำลังโมดูลัสเปอร์เซ็นต์เป็นต้น

ตารางต่อไปนี้แสดงฟังก์ชันคณิตศาสตร์ที่ใช้ใน LESS -

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย ตัวอย่าง
1

ceil

มันจะปัดเศษขึ้นเป็นจำนวนเต็มสูงสุดถัดไป

ceil(0.7)

มันปัดเศษเป็น -

1
2

floor

มันจะปัดเศษลงเป็นจำนวนเต็มที่ต่ำสุดถัดไป

floor(3.3)

มันปัดเศษเป็น -

3
3

percentage

มันแปลงตัวเลขทศนิยมเป็นสตริงเปอร์เซ็นต์

percentage(0.2)

มันแปลงตัวเลขเป็นสตริงเปอร์เซ็นต์เป็น -

20%
4

round

มันจะปัดเศษตัวเลขทศนิยม

round(3.77)

มันจะแปลงตัวเลขเป็นค่าการปัดเศษเป็น -

4
5

sqrt

มันส่งคืนค่ารากที่สองของตัวเลข

sqrt(25)

มันกำหนดรากที่สองของจำนวนเป็น -

5
6

abs

ให้ค่าสัมบูรณ์ของตัวเลข

abs(30ft)

จะแสดงค่าสัมบูรณ์เป็น -

30ft
7

sin

ส่งคืนเรเดียนของตัวเลข

sin(2)

มันคำนวณค่าไซน์เป็น -

0.90929742682
8

asin

ระบุ arcsine (ผกผันไซน์) ของตัวเลขที่ส่งกลับค่าระหว่าง -pi / 2 และ pi / 2

asin(1)

มันคำนวณค่า asin เป็น -

1.5707963267948966
9

cos

ส่งคืนโคไซน์ของค่าที่ระบุและกำหนดเรเดียนสำหรับตัวเลขที่ไม่มีหน่วย

cos(2)

มันคำนวณค่า cos เป็น -

-0.4161468365471424
10

acos

ระบุ arccosine (ผกผันโคไซน์) ของตัวเลขที่ส่งกลับค่าระหว่าง 0 ถึง pi

acos(1)

มันคำนวณค่า acos เป็น -

0
11

tan

มันระบุแทนเจนต์ของจำนวน

tan(60)

มันคำนวณค่า tan เป็น -

0.320040389379563
12

atan

มันระบุอาร์กแทนเจนต์ (ผกผันของแทนเจนต์) ของจำนวนที่ระบุ

atan(1)

จะแสดงค่า atan เป็น -

0.7853981633974483
13

pi

ส่งคืนค่า pi

pi()

กำหนดค่า pi เป็น -

3.141592653589793
14

pow

ระบุค่าของอาร์กิวเมนต์แรกยกกำลังของอาร์กิวเมนต์ที่สอง

pow(3,3)

ระบุค่ากำลังเป็น -

27
15

mod

ส่งคืนโมดูลัสของอาร์กิวเมนต์แรกเทียบกับอาร์กิวเมนต์ที่สอง นอกจากนี้ยังจัดการตัวเลขจุดลบและทศนิยม

mod(7,3)

จะคืนค่าโมดูลัสเป็น -

1
16

min

ระบุค่าที่น้อยที่สุดของอาร์กิวเมนต์ตั้งแต่หนึ่งตัวขึ้นไป

min(70,30,45,20)

จะคืนค่าต่ำสุดเป็น -

20
17

max

ระบุค่าสูงสุดของอาร์กิวเมนต์ตั้งแต่หนึ่งรายการขึ้นไป

max(70,30,45,20)

จะคืนค่าสูงสุดเป็น -

70

ในบทนี้เราจะเข้าใจถึงความสำคัญของ Type Functionsใน LESS ใช้เพื่อกำหนดประเภทของค่า

ตารางต่อไปนี้แสดงฟังก์ชัน Type ที่ใช้ใน LESS

ซีเนียร์ พิมพ์ Functions & Description ตัวอย่าง
1

isnumber

มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าเป็นตัวเลขหรือเท็จอย่างอื่น

isnumber(1234);       // true
isnumber(24px);       // true
isnumber(7.8%);       // true
isnumber(#fff);       // false
isnumber(red);        // false
isnumber("variable"); // false
isnumber(keyword);    // false
isnumber(url(...));   // false
2

isstring

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

isstring("variable"); // true
isstring(1234);       // false
isstring(24px);       // false
isstring(7.8%);       // false
isstring(#fff);       // false
isstring(red);        // false
isstring(keyword);    // false
isstring(url(...));   // false
3

iscolor

รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็นสีหรือเท็จหากไม่ใช่

iscolor(#fff);        // true
iscolor(red);         // true
iscolor(1234);        // false
iscolor(24px);        // false
iscolor(7.8%);        // false
iscolor("variable");  // false
iscolor(keyword);     // false
iscolor(url(...));    // false
4

iskeyword

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

iskeyword(keyword);   // true
iskeyword(1234);      // false
iskeyword(24px);      // false
iskeyword(7.8%);      // false
iskeyword(#fff);      // false
iskeyword(red) ;      // false
iskeyword("variable");// false
iskeyword(url(...));  // false
5

isurl

รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็น url หรือเท็จหากไม่ใช่

isurl(url(...));      // true
isurl(keyword);       // false
isurl(1234);          // false
isurl(24px);          // false
isurl(7.8%);          // false
isurl(#fff);          // false
isurl(red) ;          // false
isurl("variable");    // false
6

ispixel

มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าค่าเป็นจำนวนพิกเซลหรือเท็จอย่างอื่น

ispixel(24px);          // true
ispixel(1234);          // false
ispixel(7.8%);          // false
ispixel(keyword);       // false
ispixel(#fff);          // false
ispixel(red) ;          // false
ispixel("variable");    // false
ispixel(url(...));      // false
7

isem

รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็นค่า em หรือเป็นเท็จหากไม่ใช่

isem(0.5em);            // true
isem(1234);             // false
isem(24px);             // false
isem(keyword);          // false
isem(#fff);             // false
isem(red) ;             // false
isem("variable");       // false
isem(url(...));         // false
8

ispercentage

รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงถ้าค่าเป็นเปอร์เซ็นต์หรือส่งกลับเท็จหากค่าไม่อยู่ในเปอร์เซ็นต์

ispercentage(7.5%);       // true
ispercentage(url(...));   // false
ispercentage(keyword);    // false
ispercentage(1234);       // false
ispercentage(24px);       // false
ispercentage(#fff);       // false
ispercentage(red) ;       // false
ispercentage("variable"); // false
9

isunit

จะคืนค่าจริงหากค่าเป็นตัวเลขในหน่วยที่ระบุที่ระบุเป็นพารามิเตอร์หรือจะส่งคืนเป็นเท็จหากค่าไม่ใช่ตัวเลขในหน่วยที่ระบุ

isunit(10px, px);       // true
isunit(5rem, rem);      // true
isunit(7.8%, '%');      // true
isunit(2.2%, px);       // false
isunit(24px, rem);      // false
isunit(48px, "%");      // false
isunit(1234, em);       // false
isunit(#fff, pt);       // false
isunit("mm", mm);       // false
10

isruleset

มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าค่าเป็น ruleset หรือเท็จอย่างอื่น

@rules: {
   color: green;
}

isruleset(@rules);      // true
isruleset(1234);        // false
isruleset(24px);        // false
isruleset(7.8%);        // false
isruleset(#fff);        // false
isruleset(blue);        // false
isruleset("variable");  // false
isruleset(keyword);     // false
isruleset(url(...));    // false

คำอธิบาย

LESS มีฟังก์ชันสีที่มีประโยชน์มากมายในการปรับเปลี่ยนและปรับแต่งสีในรูปแบบต่างๆ LESS รองรับฟังก์ชันนิยามสีบางอย่างดังแสดงในตารางด้านล่าง -

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย ตัวอย่าง
1

rgb

มันสร้างสีจากค่าสีแดงเขียวและน้ำเงิน มีพารามิเตอร์ดังต่อไปนี้ -

  • red - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • green - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • blue - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

rgb(220,20,60)

มันแปลงสีด้วยค่า rgb เป็น -

#dc143c
2

rgba

กำหนดสีจากค่าสีแดงสีเขียวสีน้ำเงินและอัลฟา มีพารามิเตอร์ดังต่อไปนี้ -

  • red - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • green - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • blue - ประกอบด้วยจำนวนเต็มระหว่าง 0-255 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • alpha - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

rgba(220,20,60, 0.5)

มันแปลงวัตถุสีด้วยค่า rgba เป็น -

rgba(220, 20, 60, 0.5)
3

argb

มันกำหนดการแสดงสีฐานสิบหกใน #AARRGGBBรูปแบบ. ใช้พารามิเตอร์ต่อไปนี้ -

  • color - ระบุวัตถุสี

argb(rgba(176,23,31,0.5))

มันคืนค่าสี argb เป็น -

#80b0171f
4

hsl

สร้างสีจากค่าสีความอิ่มตัวและความสว่าง มีพารามิเตอร์ดังต่อไปนี้ -

  • hue - ประกอบด้วยจำนวนเต็มระหว่าง 0-360 ซึ่งแสดงถึงองศา

  • saturation - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • lightness - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

hsl(120,100%, 50%)

ส่งคืนวัตถุสีโดยใช้ค่า HSL เป็น -

#00ff00
5

hsla

สร้างสีจากสีความอิ่มตัวความสว่างและค่าอัลฟา มีพารามิเตอร์ดังต่อไปนี้ -

  • hue - ประกอบด้วยจำนวนเต็มระหว่าง 0-360 ซึ่งแสดงถึงองศา

  • saturation - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • lightness - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • alpha - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

hsla(0,100%,50%,0.5)

ระบุวัตถุสีโดยใช้ค่า HSLA เป็น -

rgba(255, 0, 0, 0.5);
6

hsv

สร้างสีจากค่าสีความอิ่มตัวและค่า ประกอบด้วยพารามิเตอร์ต่อไปนี้ -

  • hue - ประกอบด้วยจำนวนเต็มระหว่าง 0-360 ซึ่งแสดงถึงองศา

  • saturation - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • value - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

hsv(80,90%,70%)

มันแปลงวัตถุสีด้วยค่า hsv เป็น -

#7db312
7

hsva

สร้างสีจากเฉดสีความอิ่มตัวค่าและค่าอัลฟา ใช้พารามิเตอร์ต่อไปนี้ -

  • hue - ประกอบด้วยจำนวนเต็มระหว่าง 0-360 ซึ่งแสดงถึงองศา

  • saturation - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • value - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

  • alpha - ประกอบด้วยตัวเลขระหว่าง 0 - 1 หรือเปอร์เซ็นต์ระหว่าง 0 - 100%

hsva(80,90%,70%,0.6)

มันระบุวัตถุสีด้วยค่า hsva เป็น -

rgba(125, 179, 18, 0.6)

ในบทนี้เราจะเข้าใจถึงความสำคัญของฟังก์ชันช่องสีใน LESS LESS รองรับฟังก์ชันในตัวเพียงไม่กี่ฟังก์ชันซึ่งกำหนดค่าเกี่ยวกับช่องสัญญาณ ช่องจะกำหนดค่าขึ้นอยู่กับการกำหนดสี สี HSL มีช่องสีความอิ่มตัวและความสว่างและสี RGB จะมีช่องสีแดงสีเขียวและสีน้ำเงิน ตารางต่อไปนี้แสดงฟังก์ชันช่องสีทั้งหมด -

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย ตัวอย่าง
1

hue

ในพื้นที่สี HSL ช่องสีจะถูกแยกออกจากวัตถุสี

background: hue(hsl(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 75;
2

saturation

ในพื้นที่สี HSL ช่องความอิ่มตัวจะถูกแยกออกจากวัตถุสี

background: saturation(hsl(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 90%;
3

lightness

ในพื้นที่สี HSL ช่องความสว่างจะถูกแยกออกจากวัตถุสี

background: lightness(hsl(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 30%;
4

hsvhue

ในพื้นที่สี HSV ช่องสีจะถูกแยกออกจากวัตถุสี

background: hsvhue(hsv(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 75;
5

hsvsaturation

ในพื้นที่สี HSL ช่องความอิ่มตัวจะถูกแยกออกจากวัตถุสี

background: hsvsaturation(hsv(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 90%;
6

hsvvalue

ในพื้นที่สี HSL ช่องค่าจะถูกแยกออกจากวัตถุสี

background: hsvvalue(hsv(75, 90%, 30%));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 30%;
7

red

ช่องสีแดงถูกแยกออกจากวัตถุสี

background: red(rgb(5, 15, 25));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 5;
8

green

ช่องสีเขียวถูกแยกออกจากวัตถุสี

background: green(rgb(5, 15, 25));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 15;
9

blue

ช่องสีน้ำเงินถูกแยกออกจากวัตถุสี

background: blue(rgb(5, 15, 25));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 25;
10

alpha

ช่องอัลฟาจะถูกแยกออกจากวัตถุสี

background: alpha(rgba(5, 15, 25, 1.5));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 2;
11

luma

ค่าลูมาคำนวณจากวัตถุสี

background: luma(rgb(50, 250, 150));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 71.2513323%;
12

luminance

ค่าลูมาคำนวณโดยไม่มีการแก้ไขแกมมา

background: luminance(rgb(50, 250, 150));

มันรวบรวมใน CSS ดังที่แสดงด้านล่าง -

background: 78.53333333%;

คำอธิบาย

LESS มีฟังก์ชันการทำงานที่มีประโยชน์มากมายในการปรับเปลี่ยนและปรับแต่งสีในรูปแบบต่างๆและใช้พารามิเตอร์ในหน่วยเดียวกัน LESS รองรับฟังก์ชั่นการใช้งานสีบางอย่างดังแสดงในตารางด้านล่าง -

ซีเนียร์ คำสั่งและคำอธิบาย
1 อิ่มตัว

ความเข้มหรือความอิ่มตัวของสีในองค์ประกอบจะแตกต่างกันไป

2 ไม่อิ่มตัว

จะลดความเข้มหรือความอิ่มตัวของสีในองค์ประกอบ

3 เบาลง

เพิ่มความสว่างของสีในองค์ประกอบ

4 มืดลง

ความเข้มหรือความอิ่มตัวของสีในองค์ประกอบจะแตกต่างกันไป

5 จางหาย

เพิ่มความทึบให้กับองค์ประกอบที่เลือก

6 จางหายไป

ลดความทึบขององค์ประกอบที่เลือก

7 เลือนหายไป

ใช้เพื่อกำหนดความโปร่งใสของสีสำหรับองค์ประกอบที่เลือก

8 หมุน

ใช้เพื่อหมุนมุมของสีสำหรับองค์ประกอบที่เลือก

9 ผสม

มันผสมสองสีพร้อมกับความทึบ

10 โทนสี

ผสมสีกับสีขาวเมื่อคุณลดสัดส่วนของสี

11 ร่มเงา

มันผสมสีกับสีดำเมื่อคุณลดสัดส่วนของสี

12 สีเทา

มันจะละทิ้งความอิ่มตัวของสีในองค์ประกอบที่เลือก

13 ความคมชัด

ตั้งค่าคอนทราสต์สำหรับสีในองค์ประกอบ

ในบทนี้เราจะเข้าใจไฟล์ Color Blending Functionsใน LESS สิ่งเหล่านี้เป็นการดำเนินการที่คล้ายกันที่ใช้ในโปรแกรมแก้ไขภาพเช่น Photoshop, Fireworks หรือ GIMP ซึ่งจะจับคู่สี CSS ของคุณกับภาพของคุณ

ตารางต่อไปนี้แสดงฟังก์ชันการผสมสีที่ใช้ใน LESS

ซีเนียร์ ฟังก์ชั่นและคำอธิบาย
1 คูณ

มันคูณสองสีและส่งกลับสีที่เป็นผลลัพธ์

2 หน้าจอ

ใช้เวลาสองสีและส่งคืนสีที่สว่างกว่า มันทำงานตรงข้ามกับฟังก์ชันทวีคูณ

3 ซ้อนทับ

มันสร้างผลโดยการรวมผลของการคูณและหน้าจอ

4 แสงอ่อน

ทำงานคล้ายกับการซ้อนทับแต่ใช้เพียงบางส่วนของสีซึ่งเน้นสีอื่น ๆ ให้นุ่มนวล

5 ฮาร์ดไลท์

ทำงานคล้ายกับการซ้อนทับแต่บทบาทของสีกลับกัน

6 ความแตกต่าง

มันจะลบสีอินพุตที่สองออกจากสีอินพุตแรก

7 ยกเว้น

ทำงานคล้ายกับฟังก์ชันความแตกต่างแต่มีความคมชัดต่ำกว่า

8 เฉลี่ย

จะคำนวณค่าเฉลี่ยของสีอินพุตสองสีต่อช่องสัญญาณ (RGB)

9 การปฏิเสธ

ทำงานตรงข้ามกับฟังก์ชันที่แตกต่างซึ่งจะลบสีแรกออกจากสีที่สอง

ใช้บรรทัดคำสั่งที่เราสามารถรวบรวม.lessไฟล์.css

การติดตั้ง lessc สำหรับการใช้งานทั่วโลก

คำสั่งต่อไปนี้ใช้เพื่อติดตั้ง lessc ด้วย npm (node ​​package manager) เพื่อทำให้ lessc พร้อมใช้งานทั่วโลก

npm install less -g

คุณยังสามารถเพิ่มเวอร์ชันเฉพาะหลังชื่อแพ็กเกจได้ ตัวอย่างเช่นnpm install [email protected] -g

การติดตั้งสำหรับการพัฒนาโหนด

คำสั่งต่อไปนี้ใช้เพื่อติดตั้งlesscเวอร์ชันล่าสุดในโฟลเดอร์โปรเจ็กต์ของคุณ

npm i less -save-dev

นอกจากนี้ยังเพิ่มลงใน devDependencies ใน project package.json ของคุณ

รุ่นเบต้าของ lessc

มันถูกแท็กเป็นเบต้าเมื่อไฟล์ lessc เผยแพร่โครงสร้างไปยัง npmที่นี่มีการพัฒนาฟังก์ชันใหม่เป็นระยะ less -vใช้เพื่อรับเวอร์ชันปัจจุบัน

การติดตั้ง lessc เวอร์ชันการพัฒนาที่ไม่ได้เผยแพร่

จะต้องระบุคอมมิต - ish เมื่อเราดำเนินการติดตั้ง lessc เวอร์ชันที่ไม่ได้เผยแพร่และต้องปฏิบัติตามคำแนะนำเพื่อระบุ git URL เป็นการอ้างอิง เพื่อให้แน่ใจว่าคุณใช้ leesc เวอร์ชันที่ถูกต้องสำหรับโครงการของคุณ

การใช้งานฝั่งเซิร์ฟเวอร์และบรรทัดคำสั่ง

bin/lesscรวมไบนารีไว้ในที่เก็บ ทำงานร่วมกับ Windows, OS X และ nodejs บน * nix

การใช้บรรทัดคำสั่ง

อินพุตถูกอ่านจาก stdin เมื่อกำหนดแหล่งที่มาเป็นเส้นประหรือยัติภังค์ (-)

lessc [option option = parameter ...]  [destination]

ตัวอย่างเช่นเราสามารถรวบรวม .less ถึง .css โดยใช้คำสั่งต่อไปนี้ -

lessc stylesheet.less stylesheet.css

เราสามารถรวบรวม .less ถึง .css โดยและย่อขนาดผลลัพธ์โดยใช้คำสั่งต่อไปนี้

lessc -x stylesheet.less stylesheet.css

ตัวเลือก

ตารางต่อไปนี้แสดงตัวเลือกที่ใช้ในการใช้บรรทัดคำสั่ง -

ซีเนียร์ ตัวเลือกและคำอธิบาย คำสั่ง
1

Help

ข้อความช่วยเหลือจะปรากฏขึ้นพร้อมตัวเลือกที่มีให้

lessc -help
lessc -h
2

Include Paths

รวมถึงเส้นทางที่ใช้ได้ไปยังห้องสมุด เส้นทางเหล่านี้สามารถอ้างอิงได้อย่างเรียบง่ายและค่อนข้างซับซ้อนในไฟล์ Less เส้นทางใน windows จะคั่นด้วยเครื่องหมายทวิภาค (:) หรืออัฒภาค (;)

lessc --include-path = PATH1;PATH2
3

Makefile

สร้างรายการการอ้างอิงการนำเข้า makefile เพื่อ stdout เป็นเอาต์พุต

lessc -M
lessc --depends
4

No Color

ปิดการใช้งานเอาต์พุตสี

lessc --no-color
5

No IE Compatibility

ปิดใช้งานการตรวจสอบความเข้ากันได้ของ IE

lessc --no-ie-compat
6

Disable Javascript

ปิดการใช้งานจาวาสคริปต์ในไฟล์น้อยลง

lessc --no-js
7

Lint

ตรวจสอบไวยากรณ์และรายงานข้อผิดพลาดโดยไม่มีเอาต์พุตใด ๆ

lessc --lint
lessc -l
8

Silent

โดยบังคับให้หยุดการแสดงข้อความแสดงข้อผิดพลาด

lessc --silent
lessc -s
9

Strict Imports

บังคับให้ประเมินการนำเข้า

lessc --strict-imports
10

Allow Imports from Insecure HTTPS Hosts

นำเข้าจากโฮสต์ HTTPS ที่ไม่ปลอดภัย

lessc --insecure
11

Version

จะแสดงหมายเลขเวอร์ชันและออก

lessc -version
lessc -v
12

Compress

ช่วยในการลบช่องว่างและบีบอัดเอาต์พุต

lessc -x
lessc --compress
13

Source Map Output Filename

มันสร้าง sourcemap น้อยลง หากกำหนดตัวเลือกซอร์สแมปโดยไม่มีชื่อไฟล์จะใช้แม็พส่วนขยายที่มีชื่อไฟล์ Less เป็นซอร์ส

lessc --source-map
lessc -source-map = file.map
14

Source Map Rootpath

รูทพา ธ ถูกระบุและควรเพิ่มไปยังพา ธ ไฟล์ Less ภายในซอร์สแมปและในไฟล์แม็พที่ระบุไว้ในเอาต์พุต css ของคุณ

lessc --source-map-rootpath = dev-files/
15

Source Map Basepath

มีการระบุพา ธ ซึ่งจะต้องถูกลบออกจากพา ธ เอาต์พุต Basepath อยู่ตรงข้ามกับตัวเลือก rootpath

lessc --source-map-basepath = less-files/
16

Source Map Less Inline

ไฟล์ Less ทั้งหมดควรรวมอยู่ใน Sourcemap

lessc --source-map-less-inline
17

Source Map Map Inline

ระบุว่าในเอาต์พุต css ไฟล์แผนที่ควรอยู่ในบรรทัด

lessc --source-map-map-inline
18

Source Map URL

URL ได้รับอนุญาตให้แทนที่จุดในไฟล์แผนที่ใน css

lessc --source-map-url = ../my-map.json
19

Rootpath

กำหนดเส้นทางสำหรับการเขียน URL ใหม่ในการนำเข้าและ URL แบบสัมพัทธ์

lessc -rp=resources/
lessc --rootpath=resources/
20

Relative URLs

ในไฟล์ที่นำเข้า URL จะถูกเขียนใหม่เพื่อให้ URL สัมพันธ์กับไฟล์ฐานเสมอ

lessc -ru
lessc --relative-urls
21

Strict Math

มันประมวลผลฟังก์ชัน Math ทั้งหมดใน css ของคุณ โดยค่าเริ่มต้นจะปิด

lessc -sm = on
lessc --strict-math = on
22

Strict Units

อนุญาตให้ใช้หน่วยผสม

lessc -su = on
lessc --strict-units = on
23

Global Variable

มีการกำหนดตัวแปรซึ่งสามารถอ้างอิงได้โดยไฟล์

lessc --global-var = "background = green"
24

Modify Variable

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

lessc --modify-var = "background = green"
25

URL Arguments

ในการย้ายไปยังทุก URL สามารถระบุอาร์กิวเมนต์ได้

lessc --url-args = "arg736357"
26

Line Numbers

สร้างการแมปแหล่งที่มาแบบอินไลน์

lessc --line-numbers = comments
lessc --line-numbers = mediaquery
lessc --line-numbers = all
27

Plugin

มันโหลดปลั๊กอิน

lessc --clean-css
lessc --plugin = clean-css = "advanced"

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

LESS เป็นมิตรกับข้ามเบราว์เซอร์ รองรับเบราว์เซอร์ที่ทันสมัยเช่น Google Chrome, Mozilla Firefox, Safari และ Internet Explorer และอนุญาตให้ใช้องค์ประกอบ CSS ซ้ำและเขียนโค้ด LESS ด้วยความหมายเดียวกัน คุณต้องระมัดระวังเกี่ยวกับผลกระทบด้านประสิทธิภาพในขณะที่ใช้ LESS ในฝั่งไคลเอ็นต์และในขณะที่แสดง JavaScript เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับเครื่องสำอางเช่น

  • สะกดผิดพลาด,
  • การเปลี่ยนแปลงสี
  • Texture
  • Look
  • ลิงค์ ฯลฯ

รวบรวมไฟล์ LESS ที่ฝั่งเซิร์ฟเวอร์เพื่อปรับปรุงระดับประสิทธิภาพของเว็บไซต์

PhantomJS ไม่ได้ใช้ฟังก์ชัน Function.prototype.bindดังนั้นคุณต้องใช้es5 shim JavaScript engine เพื่อทำงานภายใต้ PhantomJS ผู้ใช้สามารถทำการปรับเปลี่ยนด้วยตัวแปรเพื่อส่งผลต่อธีมและแสดงแบบเรียลไทม์โดยใช้ LESS ฝั่งไคลเอ็นต์ในการผลิต

หากคุณต้องการเรียกใช้ LESS ในเบราว์เซอร์รุ่นเก่าให้ใช้es-5 shim JavaScript engine ซึ่งเพิ่มคุณสมบัติ JavaScript ที่ LESS รองรับ คุณสามารถใช้แอตทริบิวต์บนสคริปต์หรือแท็กลิงก์โดยใช้JSON.parseซึ่งเบราว์เซอร์ต้องรองรับ

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

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

ในการติดตั้งปลั๊กอินโดยใช้บรรทัดคำสั่งก่อนอื่นคุณต้องติดตั้งปลั๊กอิน 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 โครงกระดูก

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

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

Sr.No. Importers & Description
1 advanced-color-functions

It is used to find more contrasting colors.

2 cubehelix

Using gamma correction value of 1, the cubehelix function can return a color between the two colors.

3 lists

This lists manipulation functions library.

For Plugin Authors

LESS allow an author to combine with less.

{
   install: function(less, pluginManager) {
   },
   
   setOptions: function(argumentString) {
   },
   
   printUsage: function() {
   },
   
   minVersion: [2, 0, 0]
}
  • pluginManager provides a holder which can add file managers, post processors or visitors.

  • setOptions function passes the string.

  • printUsage function is used to explain the options.

The main point of programmatic usage in the LESS is less.render function. This function uses the following format in LESS −

less.render(input_data, options)
.then(function(output) {
   //code here
},
   
function(error) {
});

the function can also be written in the following way −

less.render(css, options, function(error, output) {})

The options is an optional argument which returns a promise when you don't specify the callback and returns a promise when you specify the callback. You can display the file by reading it into string and set the filename fields of the main file.

The sourceMap option allows to set sourcemap options such as sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles and sourceMapFileInline. The point that needs to be considered here is that the sourceMap option is not available for the less.js.

You can gain access to the log by adding a listener as shown in the below format −

less.logger.addListener({
   debug: function(message) {
   },
   
   info: function(message) {
   },
   
   warn: function(message) {
   },
   
   error: function(message) {
   }
});

The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render.

In this chapter, we will understand the importance of online compilers in LESS. Online compilers are used to compile the less code into css code. Online compilers tools easily help to generate the css code. Following are the available online less compilers −

  • winless.org/online-less-compiler

  • lesstester.com

  • dopefly.com/less-converte

  • lessphp.gpeasy.com/demo

  • leafo.net/lessphp/editor

  • estFiddle

Online Web IDEs/Playgrounds with Less support

Following are the available Online Web IDEs with Less support.

Sr.No. Online Web IDEs & Description
1 CSSDeck Labs

This is a place where you can easily create testcases that involve HTML, CSS, JS code.

2

CodePen

This is a playground for the frontend web.

3 Fiddle Salad

This is a place where you can add an existing code in the environment.

4 JS Bin

This helps Javascript and CSS code.

5 jsFiddle

This is an online web editor.

In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link.

The following table lists the GUI compilers that supports cross platform.

Sr.No. Tools & Description
1 Crunch 2!

It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling.

2

Mixture

It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices.

3 SimpLESS

It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform.

4 Koala

It is used to compile LESS, SASS and CoffeeScript. It provides features like compile error notification supports and compile options supports.

The following table lists the GUI compilers that support Windows platform.

Sr.No. Tools & Description
1 Prepros

It a tool that compiles LESS, SASS, Compass, Stylus, Jade and many more.

2 WinLess

Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments.

The following table lists the GUI compilers that supports OS X platform.

Sr.No. Tools & Description
1 CodeKit

t is successor of LESS.app and supports LESS among many other processing languages like SASS, Jade, Markdown and more.

2 LiveReload

It edits CSS and changes images instantly. SASS, LESS, CoffeeScript and others work well.

The following table lists the GUI compilers that supports OS X platform.

Sr.No. Tools & Description
1 Plessc

It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support.

In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.

Let us now discuss editors and IDEs for LESS.

Sr.No. Editors and IDEs & Description
1 Crunch!

It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling.

2 Mindscape Web Workbench

It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio.

3 NetBeans

It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS.

4 TextMate

It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system.

5 Vim

The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS.

6 Emacs

It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save.

7 jetBrains WebStorm and PhpStorm

WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks.

8 Brackets

It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers.

9 CodeLobster

It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP.

10 KineticWing IDE

It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast.

11 nodeMirror

It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries.

12 HTML-Kit Tools

This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor.

Sublime Text 2 & 3

ข้อความประเสริฐมีตัวเลือกที่แตกต่างกันสำหรับน้อยกว่าที่ระบุไว้ในตารางต่อไปนี้ -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 น้อยประเสริฐ

ไวยากรณ์ LESS สำหรับข้อความประเสริฐให้การเน้นไวยากรณ์สำหรับไฟล์ . lessพร้อมกับตัวอย่างข้อมูล

2 Sublime-Less-to-CSS

ปลั๊กอินSublime text 2และ3เพื่อรวบรวมไฟล์ . lessไปยัง CSS เมื่อคุณบันทึก มันต้องการlessc ติดตั้งบน PATH

3 น้อยสร้างประเสริฐ

LESS build system สำหรับsublime text 2ซึ่งมีระบบบิลด์สองระบบสำหรับไฟล์ LESS ทั้งแบบย่อขนาดและไม่ลดขนาด

4

SublimeOnSaveBuild

เป็นปลั๊กอินง่ายๆสำหรับSublime text 2เพื่อทริกเกอร์บิลด์เมื่อคุณคลิกบันทึก ทำงานได้ดีกับพรีโปรเซสเซอร์เช่น LESS, Compass และอื่น ๆ

คราส

Eclipseมีปลั๊กอินสองตัวสำหรับ LESS ดังแสดงในตารางต่อไปนี้ -

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

ด้วยการขยาย Eclipse IDE ปลั๊กอินนี้มีคุณลักษณะที่เป็นประโยชน์ในการแก้ไขและรวบรวมสไตล์ชีต LESS

2 ปลั๊กอิน Transpiler

ปลั๊กอิน Eclipse นี้จะย้ายไฟล์ของคุณโดยอัตโนมัติเช่น LESS, SASS, CoffeeScript และอื่น ๆ

Visual Studio

Visual Studioมีตัวเลือกต่าง ๆ ดังต่อไปนี้สำหรับ LESS -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 CSS น้อยกว่า

ส่วนขยายนี้ทำให้เปิดไฟล์ LESS ด้วยบริการภาษา CSS

2 สิ่งจำเป็นสำหรับเว็บ 2012

ส่วนขยายนี้ช่วยให้คุณทำงานทั่วไปได้ง่ายขึ้นและเพิ่มคุณสมบัติที่เป็นประโยชน์ให้กับ Visual studio สำหรับนักพัฒนาเว็บ

3 สิ่งจำเป็นสำหรับเว็บ 2013

ขยาย Visual Studio ด้วยคุณสมบัติใหม่ ๆ มากมายซึ่งไม่เฉพาะเจาะจงสำหรับภาษาหรือตัวแก้ไขที่เฉพาะเจาะจง

4 เครื่องมือเว็บ 2013

สิ่งนี้ช่วยคุณในงานพัฒนาที่เกี่ยวข้องกับ ASP.NET

Dreamweaver

จุดต่อไปนี้จะต้องมีการพิจารณาในขณะที่การทำงานร่วมกับDreamweaver

  • เป็นแอปพลิเคชัน Adobe ที่นักออกแบบและพัฒนาเว็บใช้เพื่อสร้างแอปพลิเคชันและเว็บไซต์

  • สามารถทำงานได้ในหลายแพลตฟอร์มรวมถึงเบราว์เซอร์อุปกรณ์และแท็บเล็ต
  • นักออกแบบเว็บไซต์ใช้ Dreamweaver ในการสร้างต้นแบบเว็บไซต์

  • DMXzone Less CSS Compilerทำให้ LESS CSS มีอำนาจโดยตรงใน Dreamweaver

Notepad ++ 6.x

จุดต่อไปนี้จะต้องมีการพิจารณาในขณะที่การทำงานในNotepad ++

  • Notepad ++ เป็นโปรแกรมแก้ไขข้อความฟรีและตัวแก้ไขซอร์สโค้ดซึ่งรองรับการแก้ไขแบบแท็บกล่าวคือทำงานกับไฟล์ที่เปิดอยู่หลายไฟล์ในหน้าต่างเดียว

  • LESS for Notepad ++ เป็นไฟล์ xml ที่มีการเน้นไวยากรณ์หรือการระบายสีสำหรับไฟล์ .less หากต้องการข้อมูลเพิ่มเติมคลิกที่ลิงค์นี้

  • ในการติดตั้ง Notepad ++ คลิกที่ลิงค์นี้

Node.js คอมไพเลอร์

ต่อไปนี้เป็นคอมไพเลอร์ Node.js ที่ใช้สำหรับ LESS

ฮึดฮัด - มีส่วน - น้อย

Grunt คือ Node task runner มันจะรวบรวมสไตล์ชีตของคุณทุกครั้งที่คุณทำการเปลี่ยนแปลงไฟล์ LESS ของคุณ

ประกอบน้อย

แอสเซมบลีน้อยเป็นปลั๊กอินที่มีประสิทธิภาพสำหรับการคอมไพล์ไฟล์ LESS เป็น CSS งานที่น้อยกว่าจะดึงเทมเพลต JSON และ Lo - dash (ขีดล่าง) สำหรับการกำหนดบันเดิล LESS คอมโพเนนต์ UI สไตล์ชีตหรือธีมที่บีบอัด

อึกน้อย

มันเป็นปลั๊กอินน้อยสำหรับอึก gulp-minify-cssใช้เพื่อลดขนาด CSS ของคุณ gulp-sourcemapsถูกใช้เพื่อสร้างไลบรารี sourcemaps

รับ

เป็นเครื่องมือโอเพ่นซอร์สที่สร้างขึ้นจาก LESS และช่วยในการเพิ่มประสิทธิภาพโค้ด CSS ของคุณ ช่วยให้รหัส CSS ปราศจากข้อผิดพลาดสะอาดและจัดการได้

อัตโนมัติ

เป็นโปรแกรมดูไฟล์ . less ประกอบด้วยการติดตามการพึ่งพาและการแจ้งเตือนข้ามแพลตฟอร์ม

เชื่อมต่อมิดเดิลแวร์สำหรับ Less.js

ใช้เพื่ออนุญาตการประมวลผลสำหรับเชื่อมต่อ JS framework ของไฟล์ LESS รวบรวมไฟล์ต้นฉบับตามคำขอและแคชข้อมูลที่รวบรวมไว้สำหรับการร้องขอครั้งต่อไป

เทคโนโลยีอื่น ๆ

ต่อไปนี้เป็นเทคโนโลยีอื่น ๆ อีกสองสามอย่างที่ช่วยคุณรวบรวมโค้ด LESS

Wro4j Runner CLI

คุณสามารถดาวน์โหลดwro4j-runner.jarและสามารถรวบรวมโค้ด LESS ของคุณใน CSS โดยใช้คำสั่งต่อไปนี้ -

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับWro4j Runner CLI

CSS :: LESSp

โมดูลนี้ใช้เพื่อแยกวิเคราะห์และคอมไพล์ไฟล์ LESS ลงในไฟล์ CSS ต่อไปนี้เป็นคำสั่งที่ใช้ในการคอมไพล์ -

lessp.pl styles.less > styles.css

คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับCSS :: LESSp

โฮสต์สคริปต์ของ Windows

ต่อไปนี้เป็นคอมไพเลอร์บรรทัดคำสั่งที่จะทำงานบน windows

cscript //nologo lessc.wsf input.less [output.css] [-compress]

OR

lessc input.less [output.css] [-compress]

คุณสามารถไปที่ลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับLess.js สำหรับ windows

ไม่มีจุด

ต่อไปนี้เป็นคอมไพเลอร์บรรทัดคำสั่งเพื่อเรียกใช้ dotless สำหรับ windows

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับdotless

UI / Theme Frameworks และส่วนประกอบ

LESS รองรับเฟรมเวิร์ก UI / ธีมบางส่วนตามที่แสดงในตารางต่อไปนี้ -

ซีเนียร์ กรอบและคำอธิบาย
1 1pxdeep

เป็นธีม Bootstrap 3 แบบแบนที่ให้การควบคุมโทนสีที่มีประสิทธิภาพ

2 Bootflat

เป็นเฟรมเวิร์กโอเพ่นซอร์สที่ใช้ Bootstrap

3 BootPress

เป็นเฟรมเวิร์ก PHP ที่ใช้ไฟล์ CMS แบบแบน

4 Bootstrap

เป็นเฟรมเวิร์กส่วนหน้าแรกสำหรับอุปกรณ์เคลื่อนที่ที่มีประสิทธิภาพสำหรับการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น

5 Bootstrap a11y ธีม

ช่วยให้เข้าถึงได้ง่ายสำหรับการพัฒนาเว็บ

6 รองเท้าบูท

เป็นธีมโอเพ่นซอร์สที่มีธีมฟรีสำหรับ Bootstrap

7 พระคาร์ดินัล

เป็นเฟรมเวิร์ก CSS สำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรกที่ช่วยให้สามารถรักษา CSS สำหรับเว็บไซต์ที่ตอบสนองอินเทอร์เฟซผู้ใช้และแอปพลิเคชัน

8 CSSHorus

เป็นห้องสมุดที่ช่วยให้พัฒนาเว็บไซต์บนอุปกรณ์เคลื่อนที่ได้ง่าย

9 Flat UI ฟรี

มันขึ้นอยู่กับ Bootstrap 3 ซึ่งมีส่วนประกอบพื้นฐานและซับซ้อนและมีการออกแบบธีมสำหรับ Bootstrap

10 ด้านหน้า

เป็นเฟรมเวิร์กส่วนหน้าที่มีชุดเครื่องมือสำหรับสร้างวิดเจ็ต

11

InContent

ระบุคำอธิบายของภาพโดยใช้ CSS3 และ SASS / LESS

12 หมึก

มันสร้างเว็บอินเตอร์เฟสที่ตอบสนอง

13 JBST

เป็นกรอบรูปแบบที่มีประสิทธิภาพที่ใช้สำหรับสร้างธีมย่อยสำหรับ WordPress และใช้เป็นตัวสร้างเว็บไซต์แบบสแตนด์อโลน

14 KNACSS

ใช้เพื่อพัฒนาโครงการ HTML / CSS โดยใช้สไตล์ชีตที่ตอบสนองและขยายได้

15 Kube

เป็นกรอบ CSS ที่ใช้สำหรับนักออกแบบและนักพัฒนามืออาชีพ

16 เมโทร UI CSS

เป็นกรอบงานส่วนหน้าที่ใช้สำหรับสร้าง Windows Metro Style ในโครงการ

17 พรี

เป็นกรอบ CSS ที่ใช้ LESS

18 โหมโรง

เป็นเฟรมเวิร์ก CSS ส่วนหน้าที่ใช้ LESS

19 สคีมา

เป็นกรอบที่เบาและตอบสนองซึ่งช่วยในการสร้างเว็บไซต์ที่ซับซ้อน

20 UI ความหมาย

เป็นเฟรมเวิร์กส่วนติดต่อผู้ใช้ที่สร้างเค้าโครงที่ตอบสนองโดยใช้ HTML

21 UIkit

เป็นเฟรมเวิร์กส่วนหน้าซึ่งมีส่วนประกอบ HTML, CSS และ JS และใช้งานง่ายและพัฒนาเว็บแอปพลิเคชัน

22

ngBoilerplate

เป็นระบบสร้างตามความฮึกเหิมที่ใช้สำหรับโครงการ AngularJS

23 รางน้อย

เป็นภาษาสไตล์ชีทแบบไดนามิกที่ใช้ Less.js สำหรับโปรเจ็กต์ Rails

24 เก่ง

เป็นเฟรมเวิร์กส่วนหน้าซึ่งมีส่วนประกอบ bootstrap HTML, CSS และ JavaScript สำหรับการพัฒนาโครงการเว็บที่ตอบสนอง

ระบบกริด

LESS รองรับเฟรมเวิร์กระบบกริดดังแสดงในตารางต่อไปนี้ -

ซีเนียร์ กรอบและคำอธิบาย
1 ระบบกริดที่ยืดหยุ่น

เป็นกรอบ CSS ที่สร้างโครงการเว็บด้วยวิธีที่ยืดหยุ่น

2 adaptGrid

เป็นระบบกริดที่ตอบสนองสำหรับการพัฒนาเว็บแอปพลิเคชัน

3 ของเหลว

เป็นระบบกริดที่ตอบสนองต่อน้ำหนักเบาโดยใช้ตัวประมวลผลล่วงหน้าน้อย

4 ระบบ Golden Grid

เป็นระบบกริดสำหรับการออกแบบที่ตอบสนอง

5 น้อยเซนกริด

ใช้สำหรับแก้ปัญหาการปัดเศษพิกเซลย่อย

6 Order.less

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

7 อย่างมีความรับผิดชอบ

เป็นระบบกริดที่ปรับแต่งได้และแบบสแตนด์อโลน

8 หม้อไอน้ำที่ตอบสนอง

เป็นระบบกริดน้ำหนักเบาที่ใช้ในการสร้างการออกแบบเว็บที่ตอบสนองสำหรับไซต์

9 Semantic.gs

เป็นการกระจายเริ่มต้นของเว็บเบราว์เซอร์ไปยังระบบปฏิบัติการ

ห้องสมุด Mixin

LESS จัดเตรียมไลบรารี mixin ตามรายการในตารางต่อไปนี้ -

ซีเนียร์ กรอบและคำอธิบาย
1 3L

มีคุณสมบัติ CSS3 ใหม่ล่าสุดสำหรับตัวประมวลผลล่วงหน้าน้อย

2 เคลื่อนไหว

เป็นไลบรารีที่ใช้สำหรับภาพเคลื่อนไหวของเบราว์เซอร์ที่ใช้ในโครงการ

3 ชัดเจน

ใช้มิกซ์อินน้อยที่ใช้ซ้ำได้โดยไม่ทำลายสไตล์และสร้างขนาดที่มากเกินไปในสไตล์ชีต

4 Css3LessPlease

มันแปลง css3please.com เป็นมิกซ์อินน้อยและองค์ประกอบจะได้รับการเปลี่ยนแปลงทันทีเมื่อคุณเรียกใช้ CSS

5 CssEffects

มีลักษณะพิเศษ CSS ที่เขียนเป็น LESS mixins

6 Cssowl

เป็นไลบรารี mixin ที่รองรับ LESS, SASS และ Stylus

7 cube.less

เป็นคิวบ์ภาพเคลื่อนไหว 3 มิติที่สร้างขึ้นโดยใช้ CSS เท่านั้น

8 tRRtoolbelt.less

เป็นไลบรารีที่มีมิกซ์อินและฟังก์ชันสำหรับดำเนินการกับไฟล์ LESS

9 est

มันขึ้นอยู่กับ LESS ซึ่งช่วยให้เขียนโค้ด LESS ได้อย่างมีประสิทธิภาพมากขึ้น

10 หกเหลี่ยม

สร้างรูปหกเหลี่ยม CSS ที่มีขนาดและสี

11 ไม่มีที่อยู่อาศัย

เป็นไลบรารีของมิกซ์อินที่มีฟังก์ชันที่เป็นประโยชน์สำหรับ Less.js

12

LESS Elements

มันคือชุดของ mixins สำหรับตัวประมวลผลล่วงหน้า LESS

13 หมวกน้อย

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

14 Lessley

เป็นชุดทดสอบที่เขียนด้วยภาษา LESS

15 น้อย - bidi

เป็นคอลเลกชันของมิกซ์อินน้อยซึ่งจัดแต่งทรงผมแบบสองทิศทางโดยไม่ต้องทำซ้ำรหัส

16

LESS-Mix

มันเป็นไลบรารีของ mixin ที่เขียนด้วย LESS

17 media-query-to-type

ใช้สำหรับสร้างแบบสอบถามสื่อซึ่งอนุญาตให้ Internet Explorer 8 และเวอร์ชันต่ำกว่าเข้าถึงเนื้อหาได้

18 More-Colors.less

มีตัวแปรสำหรับการปรับแต่งสีขณะออกแบบเว็บแอปพลิเคชัน

19 มาก - น้อย

เป็นไลบรารีที่อนุญาตให้เขียนโค้ด CSS สำหรับความเข้ากันได้ข้ามเบราว์เซอร์

20 More.less

เป็นการรวมกันของ Compass และ Twitter Bootstrap ซึ่งให้มากขึ้นสำหรับ LESS โดยใช้ CSS3 และเบราว์เซอร์ผสมข้าม

21 มากหรือน้อย

มีส่วนผสมที่ทรงพลังสำหรับ less js.

22 normalize.less

ให้ CSS ปกติโดยใช้ LESS

23 โอบาน

เป็นชุดของมิกซ์อินที่ช่วยเร่งกระบวนการพัฒนาเว็บแอปพลิเคชัน

24 พรีบูต

เป็นชุดของบริการ LESS ที่ใช้มิกซ์อินและตัวแปรเพื่อการเขียน CSS ที่ดีขึ้นและสร้างขึ้นจาก Bootstrap

25 โหมโรงผสม

มันเป็นไลบรารีมิกซ์อินน้อย

26 รูปร่างน้อย

มีส่วนผสมจำนวนหนึ่งสำหรับระบุรูปร่างต่างๆสำหรับแอปพลิเคชัน