استفاده از فضای نام در Less
توضیحات مقدماتی
از فضاهای نام(namespace) برای گروه بندی کردن ترکیب ها(mixin) تحت یک نام، استفاده می شود. با استفاده از فضاهای نام، می توانید از برخورد نام ها(در کد نویسی) اجتناب کنید و گروهی از ترکیب ها(mixin) را از بیرون مورد استفاده قرار دهید.
یک مثال از Less
مثال زیر، نحوه ی استفاده از فضاهای نام را در یک فایل 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 را ایجاد می کنیم:
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
همان طور که در کد بالا مشاهده می کنید، کدهای Less قسمت اول، در ترکیبی(mixin) به نام class1. بسته بندی شده اند. سپس کدهای داخل این ترکیب نیز در داخل ترکیبی دیگر به نام class2. قرار گرفته اند. و در داخل آن، یک ترکیب(mixin) دیگر به نام val. قرار دارد که یک پارامتر را می پذیرد. و به وسیله ی این پارامتر، اندازه ی فونت را مقداردهی اولیه می کند. حالا در قسمت پایین کدها، می خواهیم کدهای قرار گرفته در ترکیب val. را مقداردهی اولیه کنیم و در کلاس myclass. قرار دهیم. برای این منظور از علامت < برای دسترسی به این ترکیب ها استفاده می کنیم.
اکنون می توانید با استفاده از دستورات زیر، فایل style.less را به فایل style.css کامپایل کنید:
lessc style.less style.css
اکنون، با اجرای دستور بالا، فایل style.css به طور اتوماتیک ایجاد می شود و شامل کدهای زیر خواهد بود:
.myclass {
font-size: 20px;
color: green;
}
خروجی مثال بالا
با انجام گام های زیر، می توانید مشاهده کنید که کدهای بالا چگونه کار می کنند:
- ابتدا فایل اچ تی ام ال بالای صفحه را با نام namespaces_accessors.html ذخیره کنید.
- اکنون این فایل اچ تی ام ال را در مرورگر خود باز کنید. خواهید دید که نتیجه ی زیر حاصل خواهد شد.
مثال بالا را به صورت زنده مشاهده کنید!
با استفاده از ادیتور کدپن می توانید مثال بالا را به صورت زنده مشاهده کنید. با کلیک بر روی گوشه ی بالا و سمت راست این ادیتور، وارد صفحه ی اصلی ادیتور می شوید و می توانید کدها را ویرایش کنید.
See the Pen فضاهای نام در لس by Ehsan Abbasi (@sbaloot) on CodePen.
- نوشته شده توسط احسان عباسی
- بازدید: 3725
