برگرداندن یک متن در Less
آنچه در این مقاله خواهید آموخت
در این مقاله می آموزید که چطور یک متن را در Less مشخص کنید که بعد از کامپایل شدن، به صورت رشته در آید.
یک مثال در Less
مثال زیر نشان می دهد که چطور یک متن را مشخص کنیم که در فایل Less بعد از کامپایل شدن به صورت رشته درآید:
<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 را ایجاد می کنیم:
p {
color: ~"green";
}
اکنون می توانید با استفاده از دستورات زیر، فایل style.less را به فایل style.css کامپایل کنید:
lessc style.less style.css
با اجرای دستور بالا، فایل style.css به طور اتوماتیک، به صورت زیر ایجاد می شود:
p {
color: green;
}
همان طور که مشاهده می کنید، هرچه که در "اینجا"~ قرار گیرد، بعد از کامپایل شدن فایل Less به صورت یک رشته، چاپ خواهد شد.
خروجی مثال بالا
گام های زیر را انجام دهید تا مشاهده کنید که کدهای بالا چگونه کار می کنند:
- کد اچ تی ام ال ابتدای صفحه را با نام escaping.html ذخیره کنید.
- حال این فایل اچ تی ام ال را در یک مرورگر با کنید. خواهید دید که خروجی به صورت زیر نمایش خواهد یافت.
مشاهده ی خروجی با استفاده از ادیتور آنلاین کدپن:
با استفاده از ادیتور زیر، می توانید این مثال را به طور زنده مشاهده کنید. و با استفاده از گزینه ی بالا و سمت راست این ادیتور، می توانید وارد صفحه ی اصلی ادیتور کدپن شوید و این کدها را ویرایش کنید.
See the Pen less رشته در by Ehsan Abbasi (@sbaloot) on CodePen.
- نوشته شده توسط احسان عباسی
- بازدید: 3901
