۱۴
اسفند

جلسه ۰۸ : استفاده از فضای نام در LESS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این جلسه قصد داریم تا استفاده از فضای نام(namespace) و Accessors در LESS را به شما آموزش دهیم.

فضای نام یا namespace در less

از فضاهای نام(namespace) برای گروه بندی ترکیب ها(mixin) تحت یک نام، استفاده می شود. با استفاده از فضاهای نام و Accessors در LESS، می توانید از برخورد نام ها(در کد نویسی) اجتناب کنید و گروهی از ترکیب ها(mixin) را از بیرون مورد استفاده قرار دهید.

مثال زیر نحوه استفاده از فضای نام در 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>

<html>

<head>

<title>Less Namespaces and Accessors</title>

</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 را با استفاده از دستور زیر بسازید:

style.less

مثال :

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

.class1 {

.class2 {

.val(@param) {

font-size: @param;

color:green;

}

.myclass {

.class1 > .class2 > .val(20px);

}

اکنون می توانید با استفاده از دستورات زیر، فایل style.less را به فایل style.css کامپایل کنید:

مثال :

lessc style.less style.css

1	lessc style.less style.css

بعد از اجرای دستور بالا فایل style.css با کد زیر به صورت خودکار ایجاد خواهد شد:

style.css

مثال :

.myclass {
   font-size: 20px;
   color: green;
}

.myclass {

font-size: 20px;

color: green;

}

خروجی

با انجام گام های زیر، می توانید ببینید کدهای بالا چگونه کار می کنند:

ابتدا فایل اچ تی ام ال بالای صفحه را با نام namespaces_accessors.html ذخیره کنید.
اکنون این فایل اچ تی ام ال را در مرورگر خود باز کنید. خواهید دید که نتیجه ی زیر حاصل خواهد شد.

استفاده از فضای نام در LESS

کلام آخر

فضای نام (Namespace) ظرف انتزاعی یا محیط ایجاد شده، برای برگزاری گروه بندی منطقی از شناسه‌های منحصر به فرد یا نماد است. به بیان ساده می‌توان گفت «فضای نامی» به منظور دسته‌بندی گروهی از متغیرها استفاده می‌شود. یک name space (فضای نام) مجموعه‌ای از نمادهای نامگذاری شده هست که اغلب از متغیرها تشکیل شده است. نام‌ها یا شناسه‌ها (identifier) کلیدهایی هستند که اجازه دستیابی به ارزش نماد (symbol) را می‌دهند. فضای نام میزانی از راهنمایی برای یافتن شناسه‌های مشخص شده ایجاد می‌کنند، به صورتی که تمایز بین شناسه‌های همانند را امکان‌پذیر می‌کنند. این موضوع تا اندازه‌ای شباهت به نامگذاری افراد دارد که یک نام خانوادگی می‌تواند به عنوان یک Namespace در نظر گرفته شود چرا که با آن می‌توان افرادی که نام یکسانی دارند را از هم تشخیص داد.

QR: جلسه ۰۸ : استفاده از فضای نام در LESS

به اشتراک بگذارید

Accessors در less ,namespace ,استفاده از فضای نام ,گروه بندی mixin

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۸ : استفاده از فضای نام در LESS

مقدمه

فضای نام یا namespace در less

style.less

style.css

خروجی

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ