۱۴
اسفند

جلسه ۰۹ : محدوده متغیر در LESS

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

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

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در جلسه قبل با نحوه استفاده از فضای نام یا namespace در LESS آشنا شدید در این جلسه قصد داریم تا محدوده متغیر در LESS یا همان scope را تا حدودی تعریف کنیم.scope به محدوده از کلاس گفته میشود که در آن متغیرها و سایر اشیاء و متدها تعریف میشوند. به زبان ساده تر متغیرها تنها در بلاک یا قلمرویی که در آن معرفی میشوند وجود دارند.

تعریف محدوده متغیر در Less

محدوده متغیر بسیار شبیه به دیگر زبان های برنامه نوییسی دیگر است. در زبان های برنامه نویسی میدان دید متغیر فقط در حوزه ای اعتبار دارد که در آن تعریف شده است. برای مثلا اگر متغیری را داخل یک تابع تعریف کنید، مقدار متغیر فقط داخل همان تابع اعتبار دارد یا محدوده از کلاس و خارج از آن تعریف نشده است و به اصلاح می گویند میدان دید ندارد.

محدوده(scope) یک متغیر، ناحیه ی دیده شدن متغیر را مشخص می کند. روند کار به این صورت است که ابتدا متغیر مورد نظر به صورت محلی مورد جستجو قرار می گیرد و اگر که متغیر پیدا نشد، کامپایلر در میدان دید والد، به جستجوی آن می پردازد.

مثال زیر کاربرد محدوده متغیر در LESS را نشان میدهد:

مثال :

<html>
   <head>
      <title>Less Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

<html>

<head>

<title>Less Scope</title>

</head>

<body>

<h1>Example using Scope</h1>

<p class = "myclass">LESS enables customizable,

manageable and reusable style sheet for web site.</p>

</body>

</html>

اکنون فایل style.less را بسازید:

style.less

مثال :

@a: 15px;

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

@a: 15px;

.myclass {

font-size: @var;

@a:20px;

color: green;

}

سپس با استفاده از دستورات زیر، میتوانیم فایل 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;

}

خروجی

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

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

کلام آخر

به پایان جلسه دیگری از آموزش های دوره less رسیدیم و فهمیدیم که به زبان خیلی ساده:

محدوده هر متغیر، بلاکی است که در آن تعریف میشود.

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

scope ,قلمرو هر متغیر ,محدوده متغیر در LESS ,میدان دید یک متغیر

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

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

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

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

جلسه ۰۹ : محدوده متغیر در LESS

مقدمه

تعریف محدوده متغیر در Less

style.less

style.css

خروجی

کلام آخر

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

مقدمه

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

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ