آموزش کار با دستورات Mixin در Sass

آموزش Sass – کار با دستورات Mixin

Mixin ها به شما این امکان را می دهند تا کدهای CSS و دستورات style دهی پرکاربرد که قرار است بارها در جاهای مختلف stylesheet استفاده نمایید را گروه بندی کرده و آماده داشته باشید. Mixin ها می توانند دستورات کامل CSS و هر آنچه که در فایل Sass تعریف شده و بکار می رود را در برگیرد.

mixin ها نیز می توانند مانند توابع آرگومان بپذیرند. این امر به شما امکان می دهد تا با تعداد محدودی mixin، طیف گسترده ای از style ها را تولید نمایید.

چگونگی تعریف Mixin - mixin@

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

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

Mixin ها می توانند selector هایی که با property ها ترکیب شده اند را نیز به عنوان محتوا در خود جای دهند. این selector ها همچنین می توانند اشاره گر به selector میزبان (parent reference) را شامل شوند. مثال:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

به دلایلی که به گذشته برمی گردد، در اسم mixin (و همچنین تمامی اسم هایی که برای کامپوننت های مختلف Sass انتخاب می شود) می توان از خط تیره (hyphen) و زیرخط (underscore) بجای یکدیگر استفاده نمود. برای مثال، اگر شما یک mixin به نام add-column تعریف نمایید، می توانید آن را به صورت add_column و برعکس نیز استفاده کنید.