آموزش less ادغام فایل ها با یکدیگر
مقدمه
خدمت علاقه مندان به آموزش 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;
}
نظرات کاربران