۱۴
اسفند

جلسه ۱۷ : استفاده از mixin در ruleset

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

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

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن ، و کاربرانی که دوره کامل آموزش LESS را دنبال می کنند.در این جلسه قصد داریم به مبحث استفاده از mixin در ruleset بپردازیم. ruleset در LESS در یک متغیر ذخیره می شود و سپس می تواند به دیگر ساختارها اضافه شود. با اضافه کردن یک ruleset در LESS در داخل کدها(ساختارها)، تمام خصوصیات تعریف شده در آن، در داخل آن ساختار کپی می شوند.

استفاده از mixin در ruleset

ruleset، که به آن مجموعه قواعد نیز گفته می شود، می تواند شامل خاصیت ها(properties) و مجموعه قواعد تو در تو(nested ruleset) و تعریف متغیرها و mixin ها و دیگر موارد باشد. یک ruleset در یک متغیر ذخیره می شود و سپس می تواند به دیگر ساختارها اضافه شود. mixin ها برای گروه بندی دستورالعمل CSS در کلاس های مفید و قابل استفاده مجدد استفاده می شوند.

در مثال زیر، از یک mixin در داخل یک ruleset در یک فایل Less استفاده شده است:

passing_ruleset.htm

مثال :

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

<!doctype html>

<head>

</head>

<body>

<h2>Welcome to TutorialsPoint</h2>

<p>The largest Tutorials Library on the web.</p>

</div>

</body>

</html>

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

style.less

مثال :

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

@detached-ruleset: {

.mixin() {

font-family: "Comic Sans MS";

background-color: #AA86EE;

}

};

.cont {

@detached-ruleset();

.mixin();

}

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

مثال :

lessc style.less style.css

1	lessc style.less style.css

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

style.css

مثال :

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

.cont {

font-family: "Comic Sans MS";

background-color: #AA86EE;

}

خروجی

اجازه دهید تا با انجام گام های زیر، نتیجه ی کدهای بالا را در عمل مشاهده کنیم:

کد اچ تی امال بالا را با نام passing_ruleset.html ذخیره کنید.
حالا این فایل اچ تی ام ال را در یک مرورگر باز کنید، خروجی زیر نمایش داده می شود.

استفاده از mixin در ruleset

کلام آخر

استفاده از mixin در ruleset آخرین مبحث مربوط به minixها بود،و ما فهمیدیم که با اضافه کردن یک ruleset در داخل کدها(ساختارها)، تمام خصوصیات تعریف شده در آن، در داخل آن ساختار کپی می شوند.

QR: جلسه ۱۷ : استفاده از mixin در ruleset

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

nested ruleset ,برگرداندن مقادیر در mixin ها ,مجموعه قواعد تو در تو

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

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

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

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

جلسه ۱۷ : استفاده از mixin در ruleset

مقدمه

استفاده از mixin در ruleset

passing_ruleset.htm

style.less

style.css

خروجی

اجازه دهید تا با انجام گام های زیر، نتیجه ی کدهای بالا را در عمل مشاهده کنیم:

کلام آخر

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

مقدمه

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

توابع در LESS

کاربرد LESS

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ