مقدمه
خدمت علاقه مندان به آموزش Less سلام عرض می کنم. در جلسه قبلی با آموزش درج توضیجات در Less آشنا شدیم. در این جلسه قصد داریم با آموزش ادغام فایل های less یا import در less آشنا شویم.
وارد کردن یا اضافه کردن محتویات یک فایل به فایل دیگر
یکی از قابلیت های بسیار خوب در Less این است که می توانید کل محتویات یک فایل Less را در یک فایل Less دیگر باز کنید و به آن سند اضافه کنید.
برای روشن شدن مطلب به مثال زیر توجه کنید.
فرض کنید یک سند html به شکل زیر داریم که 3 پاراگراف یا تگ <p> دارای متن دارند.
<html> <head> <title>Importing in Less ilikephp.ir</title> <link rel = "stylesheet" type = "text/css" href = "style.css"> </head> <body> <h1>Less Import Example</h1> <p class="class1"> Importing works pretty much as expected. </p> <p class="class2"> When using an @import (reference), mixins that contain an & selector get added to the compiled output improperly </p> <p class="class3"> ilikephp.ir has many diffrent tutorial programming Language </p> </body> </html>
در سند بالا 3 تگ <p> با کلاس های class1,class2,class3 وجود دارد. فرض کنیم دو کلاس class1 و class2 داخل فایلی به نام myless.less قرار دارند.
myless.less
.class1 { color: red; font-size: 20px; } .class2 { color: blue; font-size: 30px; }
فایل دیگری به نام style.less نیز به شکل زیر وجود دارد.
style.less
.class3 { color: green; font-size: 40px; }
حال برای اضافه کردن یا وارد کردن فایل myless.less به فایل style.less به شکل زیر عمل می کنیم.
.class3 { color: green; font-size: 40px; }
حال فایل style.less را به style.css کامپایل می کنیم.
lessc style.less style.css
خروجی به شکل زیر می شود. دقت کنید که قایل myless.less وارد (import) فایل style.less شده است.
.class1 { color: red; font-size: 20px; } .class2 { color: blue; font-size: 30px; } .class3 { color: green; font-size: 40px; }
