آموزش نحوه ی تعریف Mixin در Sass

آموزش Sass – نحوه ی تعریف Mixin

برای تعریف mixin لازم است ابتدا دستور @mixin، سپس اسم دلخواه، آرگومان هایی که قرار است به آن ارسال شوند و در نهایت قطعه کدی که دربردارنده ی محتوای mixin خواهد بود را مشخص نمایید. برای مثال، میکسین large-text به صورت زیر تعریف می شود:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

مثال کاربردی

مثال زیر نحوه ی استفاده از دستور @mixin و تعریف یک قطعه کد میکسین که گروهی از کدهای CSS آماده می باشد را به صورت عملی نمایش می دهد:

sample.htm
< html >
   < head >
      < title > Mixin example of sass< /title >
      < link rel="stylesheet" type="text/css" href="sample.css" / >
   < /head >
   < body >
      < div class="cont" >
         < h1 >Example using include< /h1 >
         < h3 >Directive is used to define the Mixins, it includes variables and argument optionally.< /h3 >
      < /div >
   < /body >
< /html >

حال فایل sample.scss را ایجاد نمایید.

sample.scss
@mixin style {
   .cont{
      color: #77C1EF;
   }
}
@include style;

می توانید با اجرای دستور زیر به SASS فرمان دهید که بر روی محتوای فایل مورد نظر نظارت داشته و هرگاه تغییری در فایل SASS به وجود آمد، css متناظر را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\sample.scss:sample.css

پس از اجرای دستور بالا، یک فایل به نام sample.css به صورت خودکار ایجاد می شود که دارای محتوای زیر می باشد:

sample.css
.cont {
   color: #77C1EF;
}

خروجی

جهت مشاهده ی خروجی کد بالا، مراحل زیر را به ترتیب طی نمایید:

• کد html بالا را در فایل sample.htm ذخیره نمایید.
• فایل HTML را با مرورگر دلخواه باز کرده و خروجی را مشاهده نمایید.