با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. اگر به خاطر داشته باشید در جلسه قبل با آموزش عملگرها در less در خدمت شما بودیم. در این جلسه می آموزید که چطور یک متن را در Less مشخص کنید که بعد از کامپایل شدن، به صورت رشته در آید که به این عمل برگرداندن متن در Less یا escaping در Less می گویند.
شیوه کار escaping در Less به این صورت است که رشته مورد نظر را بین دو کاراکتر “” یا ” نوشته و سپس یک علامت ~ قبل از آن قرار می دهیم.
مثال زیر برگرداندن متن در Less را بعد از کامپایل شدن به صورت رشته نشان میدهد:
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <title>Less Escaping</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <h1>Example using Escaping</h1> <p>LESS enables customizable, manageable and reusable style sheet for web site.</p> </body> </html> |
اکنون فایل style.less را بسازید:
1 2 3 | p { color: ~"green"; } |
سپس می توانید با استفاده از دستور زیر، فایل style.less را به فایل style.css کامپایل کنید:
1 | lessc style.less style.css |
با اجرای دستور بالا، فایل style.css به صورت خودکار، ایجاد می شود:
1 2 3 | p { color: green; } |
همان طور که میبینید، هرچیزی که در “این قسمت”~ نوشته شود، بعد از کامپایل شدن فایل Less به صورت یک رشته، چاپ خواهد شد.
گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند: