مقدمه
با سلام خدمت شما کاربر محترم و علاقه مندان به آموزش less . در جلسه قبل با آموزش نحوه استفاده توابع در less آشنا شدیم. در این آموزش با آموزش فضای نام یا namespace در less آشنا می شویم.
فضای نام یا namespace چیست؟
قبل از این که به آموزش نحوه استفاده از namespace در less بپردازیم ابتدا تعریفی کلی از "فضای نام" یا namespace می کنیم تا مفهوم آن کاملا برای شما روشن شود.
فرض کنید از شما خواسته شود تا برای صبحانه پنیر تهیه کنید. اولین سوالی که برای شما پیش می آید این است که چه پنیری بگیرم؟ پاک، روزانه، کاله، پگاه و … در این جا معلوم است که داخل هر ظرف ماده واحدی به نام پنیر وجود دارد که با نام های خاصی از یکدیگر قابل تشخیص و تمایز هستند. فقط با نام کاله شما می توانید پنیر کاله را تشخیص دهید و … در برنامه نویسی هم کار به همین شکل است. به دلیل اینکه شما نمی توانید دو کلاس هم نام را در برنامه داشته باشید توسط namespace ها می توانید کلاس ها را گروه بندی کنید
فضای نام یا namespace در les
فضای نام در less به منظور گروه بندی ترکیب ها یا mixin ها تحت عنوان یک نام استفاده می شود. توسط namespace در less شما می توانید گروهی از mixin ها رااز خارج برنامه در داخل برنامه استفاده کنید بدون اینکه تداخل نامی پیش بیاید.
مثال: در مثال زیر نحوه استفاده از فضای نام در less را توضیح میدهیم.
<html> <head> <title>Use Namespaces in Less</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <h1>How using Namespaces in Less</h1> <p class = "style1">Less is a CSS pre-processor, meaning that it extends the CSS language</p> <p class = "style2">Less is a CSS pre-processor, meaning that it extends the CSS language</p> </body> </html>
حالا فایل style.less را به گونه زیر می سازیم
.myClass1 { .myClass2 { .value1(@param) { background-color: @param; color:green; } .value2(@param) { background-color: @param; color:green; } } }
بسیار خب در مثال بالا مشاهده می کنید که یک mixin به نام myClass1 موجود است و درون آن mixin دیگری به نام myClass2 نیز قرار دارد. درون myClass2 نیز دو بسته به نام value1 و value2 قرار دارند که هر کدام یک پارامتر که تعیین کننده رنگ زمینه یعنی background-clor می باشند می پذیرند. حال پارامترهای هر کدام از value1 و value2 را مقدار دهی مکینم و هر کدام را درون کلاسهایی جدا به نام های style1 و style2 میریزیم. حال برای دسترسی به هر یک از این بسته ها به صورت سلسله مراتبی و از علامت < استفاده می کنیم. به صورت زیر :
.style1 { .myClass1 > .myClass2 > .value1(red); } .style2 { .myClass1 > .myClass2 > .value2(pink); }
حال فایل style.less را به style.css کامپایل می کنیم.
lessc style.less style.css
فایل style.less به صورت زیر کامپیال می شود:
.style1 { background-color: red; color: green; } .style2 { background-color: pink; color: green; }
