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