استفاده از 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.

: نوشته شده توسط احسان عباسی; بازدید: 3422

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی