น้อย - คำสั่งนำเข้า

คำอธิบาย

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