آموزش Less

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

تعریف

کامنت باعث میشود تا کد شما واضح شود و دیگران به راحتی آنرا متوجه شوند. شما میتوانید کامنت خود را بصورت بلوک و یا بصورت اینلاین بنویسید، اما اگر بصورت اینلاین کامنت بنویسید هنگام کامپایل از بین میروند و آنرا در فایل CSS نخواهید دید.

مثال

مثال زیر کامنت گذاری در فایل LESS را نشان میدهد:

<html>
<head>
   <title>Less Comments</title>
   <link rel="stylesheet" type="text/css" href="/style.css" />
</head>
<body>
   <h1>Example using Comments</h1>
   <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   <p class="myclass1">It allows reusing CSS code and writing LESS code with same semantics.</p>
</body>
</html>

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

/* It displays the
green color! */
.myclass{
color: green;
}
// It displays the blue color
.myclass1{
color: red;
}

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

lessc style.less style.css

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

/* It displays the
green color! */
.myclass {
  color: green;
}
.myclass1 {
  color: red;
}

خروجی

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

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

کامنت گذاری در LESS

نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    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

افراد آنلاین

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