۱۴
اسفند

جلسه ۱۰ : استفاده از کامنت در LESS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام خدمت کاربران سایت پی وی لرن و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. در این جلسه استفاده از کامنت در LESS را یادخواهیم گرفت.کامنت‌ها باعث می شوند تا درک کدها ساده تر شود طوری‌که به سادگی میتوان منظور استفاده از این کدها را فهمید.

فهرست

کامنت در LESS

در Less، می‌توان کامنت‌ها را به صورت چند-خطی و یا تک-خطی ایجاد کرد. اما باید گفت که، بعد از کامپایل شدن، کامنت های تک خطی، در فایل css ظاهر نمی شوند و فقط مخصوص مشاهده در فایل Less هستند.

استفاده از کامنت در LESS

مثال :

   </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>

</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 را بسازید:

style.less

مثال :

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

// It displays the blue color
.myclass1 {
   color: red;
}

/* 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

1	lessc style.less style.css

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

style.css

مثال :

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

.myclass1 {
   color: red;
}

/* It displays the

green color! */

.myclass {

color: green;

}

.myclass1 {

color: red;

}

خروجی

با انجام گام های زیر، می توانید مشاهده کنید که این کدها چگونه کار می کنند و خروجی آنها چیست:

ابتدا کدهای اچ تی ام ال قرار گرفته در بالا را در فایلی با نام comments.html ذخیره کنید.
حالا این فایل اچ تی ام اب را در یک مرورگر باز کنید. خروجی به صورت زیر خواهد بود:

استفاده از کامنت در LESS

کلام آخر

توجه داشته باشید که دقت کنید توضیحات شما تنها درک کدها را روشن کنند نه این که آن ها را تحت الشعاع قرار دهند. بسیاری از برنامه نویسان تازه کار حتی برای واضح ترین و ابتدایی ترین کدها هم کامنت می نویسند که این کاری بس اشتباه است! نوشتن توضیحات زیاد و مفصل می تواند به مانعی برای خوانایی کدهای شما در آینده تبدیل شود.

به اشتراک بگذارید

استفاده از کامنت ,توضیحات در less ,کامنت‌ چند-خطی و یا تک-خطی ,کامنت در LESS

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۰ : استفاده از کامنت در LESS

کامنت در LESS

استفاده از کامنت در LESS

style.less

style.css

خروجی

کلام آخر

لیست مطالب دوره

مقدمه

ویژگی های زبان برنامه نویسی LESS

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ