با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در جلسه قبل با نحوه استفاده از فضای نام یا namespace در LESS آشنا شدید در این جلسه قصد داریم تا محدوده متغیر در LESS یا همان scope را تا حدودی تعریف کنیم.scope به محدوده از کلاس گفته میشود که در آن متغیرها و سایر اشیاء و متدها تعریف میشوند. به زبان ساده تر متغیرها تنها در بلاک یا قلمرویی که در آن معرفی میشوند وجود دارند.
محدوده متغیر بسیار شبیه به دیگر زبان های برنامه نوییسی دیگر است. در زبان های برنامه نویسی میدان دید متغیر فقط در حوزه ای اعتبار دارد که در آن تعریف شده است. برای مثلا اگر متغیری را داخل یک تابع تعریف کنید، مقدار متغیر فقط داخل همان تابع اعتبار دارد یا محدوده از کلاس و خارج از آن تعریف نشده است و به اصلاح می گویند میدان دید ندارد.
محدوده(scope) یک متغیر، ناحیه ی دیده شدن متغیر را مشخص می کند. روند کار به این صورت است که ابتدا متغیر مورد نظر به صورت محلی مورد جستجو قرار می گیرد و اگر که متغیر پیدا نشد، کامپایلر در میدان دید والد، به جستجوی آن می پردازد.
مثال زیر کاربرد محدوده متغیر در LESS را نشان میدهد:
1 2 3 4 5 6 7 8 9 10 11 12 | <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 را بسازید:
1 2 3 4 5 6 7 | @a: 15px; .myclass { font-size: @var; @a:20px; color: green; } |
سپس با استفاده از دستورات زیر، میتوانیم فایل style.less را به فایل style.css کامپایل کنیم:
1 | lessc style.less style.css |
با اجرای دستورات بالا، فایل style.css به طور خودکار به صورت زیر ایجاد خواهد شد:
1 2 3 4 | .myclass { font-size: 20px; color: green; } |
با انجام گام های زیر، می توانید عملکرد کدهای بالا را مشاهده کنید:
به پایان جلسه دیگری از آموزش های دوره less رسیدیم و فهمیدیم که به زبان خیلی ساده:
محدوده هر متغیر، بلاکی است که در آن تعریف میشود.