آموزش طراحی سایت (HTML CSS Javascript) | آتریا

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

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

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

مثال

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

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

اکنون فایل 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;
}

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

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

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

: نوشته شده توسط احسان عباسی; بازدید: 3076

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی