น้อย - ฟังก์ชั่น

คำอธิบาย

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 นี้ในเบราว์เซอร์ซึ่งแสดงขึ้นคุณจะได้รับผลลัพธ์ต่อไปนี้