آموزش Less برگرداندن رشته یا scaping

1396/4/31 علیرضا حاتمی نیا 392

less scaping بر گرداندن رشته در less

مقدمه:

با سلام خدمت شما کاربر محترم آموزش برنامه نویسی و طراحی وب من علیرضا حاتمی نیا هستم و با بخشی دیگر از آموزش less از وبسایت ilikephp در خدمت  شما هستم. 
اگر به خاطر داشته باشید در جلسه قبل با آموزش عملگرها در less در خدمت شما بودیم. در این جلسه قصد داریم تا با آموزش برگرداندن رشته در less یا less scaping آشنا شویم. 

برگرداندن یک رشته در less یا escaping 

توسط escaping در less شما می توانید یک رشته دلخواه را به عنوان یک ویژگی یا مقدار یک متغیر استفاده کنید. شیوه کار نیز به این صورت است که رشته مورد نظر را بین دو کاراکتر "" یا ''  نوشته و بعد یک علامت ~ قبل از آن قرار می دهیم.
فرض کیند رشته مورد نظر ما عبارت "this is tutorial of scaping in less" می باشد. پس به شیوه زیر عمل میکنیم. 

~"this is tutorial of scaping in less"

یا

~'this is tutorial of scaping in less'

به مثال زیر در فایل mystyle.less اینگونه عمل می کنیم: 

توسط دستور زیر فایل mystyle.less را به mystyle.css کامپایل می کنیم.

lessc mystyle.less mystyle.css

اجرای کد بالا فایل mystyle.css را به صورت خودکار می سازد.

mystyle.css

.myElement {
  content: ^//* this is tutorial of scaping in less;
}

در مثالی دیگر فرض کنید قصد داریم مقدار خصوصیت color را برای تگ div برابر red قرار دهیم. پس فایل mystyle.less را به شکل زیر می سازیم 

mystyle.less

div {
color: ~"red";
}

توسط دستور زیر فایل mystyle.less را به mystyle.css کامپایل می کنیم.

lessc mystyle.less mystyle.css

mystyle.css

div {
color: red;
}

 

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت