آموزش Less

آموزش طراحی وب سایت با استفاده از Less

تعریف

یک متغیر میتواند به یک property ارجاع داده شود.

مثال

مثال زیر الحاق property در فایل LESS را نشان میدهد:

 

<html>
<head>
  <link rel="stylesheet" href="/style.css" type="text/css" />
  <title>LESS Variables Interpolation Properties</title>
</head>
<body>
<div class="myclass">
<h2>Welcome to Tutorialspoint</h2>
<p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</body>
</html>

سپس فایل style.less را ایجاد کنید.

 

@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}

با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:

 

lessc style.less style.css

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

 

.myclass {
  background-color: #81F7D8;
}

خروجی

 بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:

  • کدهای html بالا را در فایل less_variables_interpolation_properties.html ذخیره کنید.
  • فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.

LESS - الحاقات - property

 

 

 

 

نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    LESS فریم ورک  CSS است که میتوان استایل شیت را شخصی سازی و مدیریت کند. همچنین میتوان از آن برای

    Read More

  • نصب LESS +

    LESS فریم ورک  CSS است که میتوان استایل شیت را شخصی سازی و مدیریت کند و میتواند بر روی تمامی

    Read More

  • LESS - قوانین تو در تو - Nested Rules +

    یکسری از ویژگی های CSS وجود دارد که به شما این اجازه را میدهد تا از ویژگی های یک کلاس

    Read More

  • LESS - directive های تو در تو +

    شما میتوانید directive هایی نظیر media و keyframe را بصورت تو در تو بنویسید. شما میتوانید directive را در بالا

    Read More

  • LESS - عملیات ریاضی +

    LESS از برخی عملیات های ریاضی نظیر جمع (+)، منها (-)، ضرب (*)، و تقسیم (/) پشتیبانی میکند و میتوانند بر روی اعداد، رنگ

    Read More

  • LESS - escaping +

    escaping سلکتورها را بصورت داینامیک ایجاد میکند و از مقادیر متغیرها به شکل رشته استفاده میکنند.

    Read More

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

افراد آنلاین

ما 19 مهمان و بدون عضو آنلاین داریم