۱۴
اسفند

جلسه ۰۳ : قوانین تو در تو در Less

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

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

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند. جلسه سوم از آموزش های کامل دوره LESS را شروع می کنیم.این جلسه قصد داریم برخی از قوانین تو در تو در less را که موجب انتقال خصوصیات کلاس(خواص css) می شوند به شما آموزش دهیم.این آموزش های Less بسیار مقدماتی،همچنین همراه با مثال آورده شده اند تا شما به راختی بتوانید آنها را درک کنید.با ما همراه باشید تا آموزش های لازم را یاد بگیرید.

قوانین تو در تو در Less

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

مثال زیر استفاده از قوانین تو در تو فایل LESS را نشان می دهد:

مثال :

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>First Heading</h1>
         <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
         <div class = "myclass">
            <h1>Second Heading</h1>
            <p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
         </div>
      </div>
   </body>
</html>

<html>

<head>

<title>Nested Rules</title>

</head>

<body>

<h1>First Heading</h1>

<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>

<h1>Second Heading</h1>

<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>

</div>

</body>

</html>

مرحله بعد، فایل style.less را ایجاد کنید.

style.less

مثال :

.container {
   h1 {
      font-size: 25px;
      color:#E45456;
   }
   p {
      font-size: 25px;
      color:#3C7949;
   }

   .myclass {
      h1 {
         font-size: 25px;
         color:#E45456;
      }
      p {
         font-size: 25px;
         color:#3C7949;
      }
   }
}

.container {

h1 {

font-size: 25px;

color:#E45456;

}

p {

font-size: 25px;

color:#3C7949;

}

.myclass {

h1 {

font-size: 25px;

color:#E45456;

}

p {

font-size: 25px;

color:#3C7949;

}

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

مثال :

lessc style.less style.css

1	lessc style.less style.css

فرمان بالا را اجرا کنید فایل style.css به طور خودکار با کد زیر ایجاد می شود:

style.css

مثال :

.container h1 {
   font-size: 25px;
   color: #E45456;
}

.container p {
   font-size: 25px;
   color: #3C7949;
}

.container .myclass h1 {
   font-size: 25px;
   color: #E45456;
}

.container .myclass p {
   font-size: 25px;
   color: #3C7949;
}

.container h1 {

font-size: 25px;

color: #E45456;

}

.container p {

font-size: 25px;

color: #3C7949;

}

.container .myclass h1 {

font-size: 25px;

color: #E45456;

}

.container .myclass p {

font-size: 25px;

color: #3C7949;

}

خروجی

با دنیال کردن گام های زیر خواهید دید کدهای بالا چگونه کار میکنند.

کد اچ تی ام ال بالا را در فایل nested_rules.html ذخیره کنید.

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

قوانین تو در تو در Less

کلام آخر

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

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

آموزش Less ,تعریف mixin ,خواص CSS ,قواعد تو در تو درless ,قوانین درless

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

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

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

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

جلسه ۰۳ : قوانین تو در تو در Less

مقدمه

قوانین تو در تو در Less

style.less

style.css

کلام آخر

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

مقدمه

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

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ