%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

استفاده از 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;
}

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

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

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

 

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