سبد (0)

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

توضیحات مقدماتی

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

مثال

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

<!doctype html><head><linkrel="stylesheet"href="style.css"type="text/css" /></head><body><divclass="cont"><h2>Welcome to TutorialsPoint</h2><p>The largest Tutorials Library on the web.</p></div></body></html>

اکنون فایل style.less را ایجاد می کنیم:

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

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

lessc style.less style.css

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

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

ایجاد خروجی کدهای بالا

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

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

 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان