مقدمه
با سلامی مجدد خدمت شما دوستداران و علاقه مندان به آموزش LESS
من علیرضا حاتمی نیا هستم و با قسمت جدیدی از آموزش LESS از سری آموزشهای برنامه نویسی و طراحی وب در خدمت شما هستم.
در جلسه قبل با نحوه استفاده از فضای نام یا namespace در LESS آشنا شدید و در این قسمت به مبحثی به نام میدان دید یک متغیر یا Scope در Less می پردازیم.
میدان دید یا scope در Less
تعریف میدان دید در Less بسیار شبیه به دیگر زبان های برنامه نوییسی دیگر است. در زبان های برنامه نویسی میدان دید متغیر فقط در حوزه ای اعتبار دارد که در آن تعریف شده است. برای مثلا اگر متغیری را داخل یک تابع تعریف کنید، مقدار متغیر فقط داخل همان تابع اعتبار دارد و خارج از آن تعریف نشده است و به اصلاح می گویند میدان دید ندارد.
میدان دید یا scope در Less نیز به همین صورت است. متغیرها یا mixin ها ابتدا مقدار خود را در محل خود جستجو می کنند اگر پیدا نشد والد خود را جستجو می کنند و این روند همین طور ادامه پیدا خواهد کرد.
به یک مثال ساده توجه کنید.
@color: green; #myPage { @color: red; #myHeader { color: @color; // red } }
در مثال بالا مقدار متغیر color ابتدا green تعریف شده است. ولی این متغیر در والد myHeader که همان myPage است red تعریف شده است. پس مقدار آن همان red میشود.
اگر کدهای بالا را به css کامپایل کنیم نتیجه به شکل زیر می شود:
#myPage #myHeader { color: red; }
توجه داشته باشید که متغیرها یا mixin ها را قبل از تعریف فراخوانی نکنید. مثال زیر دقیقا همان نتیجه بالا را می دهد.
@color: green; #myPage { #myHeader { color: @color; // red } @color: red; }
کدهای بالا پس از کامپایل به Css به این شکل می شود.
#myPage #myHeader { color: red; }
