استفاده از URL در Less
توضیحات مقدماتی
از متغیرها می توان برای نگهداری URL ها نیز استفاده نمود.
مثالی از Less
در مثال زیر، نحوه ی استفاده از متغیرها برای نگهداری URL ها در Less نشان داده شده است:
<html>
<head>
<link rel="stylesheet" href="/style.css" type="text/css" />
<title>LESS URLs</title>
</head>
<body>
<div class="myclass">
</div>
</body>
</html>
اکنون فایل style.less را ایجاد می کنیم:
@images: "http://www.tutorialspoint.com";
.myclass {
background : url("@{images}/less/images/less_variables/birds.jpg");
width:800px;
height:500px;
}
همان طور که در کد بالا مشاهده می کنید، یک URL را در یک متغیر به نام images قرار داده ایم. و سپس در خط سوم از این متغیر استفاده کرده ایم. اما به خاطر داشته باشید که در خط سوم، برای استفاده از این متغیر، آن را درون آکولاد قرار داده ایم و قبل از آکولادها از یک نماد @ استفاده کرده ایم.
حالا می توانید با استفاده از دستورات زیر، فایل style.less را به فایل style.css کامپایل کنید:
lessc style.less style.css
با اجرای دستورات بالا، فایل style.css به طور اتوماتیک به صورت زیر ایجاد می شود:
.myclass {
background: url("http://www.tutorialspoint.com/less/images/less_variables/birds.jpg");
width: 800px;
height: 500px;
}
خروجی کدهای بالا
با انجام گام های زیر، می توانید خروجی کدهای بالا را مشاهده کنید:
- کدهای اچ تی ام ال بالای صفحه را با نام less_variables_interpolation_url.html ذخیره کنید.
- حالا این فایل را در یک مرورگر باز کنید. خروجی به صورت زیر خواهد بود:
مشاهده ی مثال بالا، به صورت زنده، با استفاده از ادیتور کدپن
See the Pen استفاده از یو آر ال در لس by Ehsan Abbasi (@sbaloot) on CodePen.
- نوشته شده توسط احسان عباسی
- بازدید: 3556
