آموزش وارد کردن یک mixin در فایل StyleSheet با Sass

آموزش Sass – وارد کردن یک mixin در فایل StyleSheet

می توان با استفاده از دستور @include، قطعه کد mixin را به فایل stylesheet مورد نظر اضافه کرد. این directive اسم mixin، آرگومان های اختیاری که به آن فرستاده می شوند را دریافت کرده و style های تعریف شده داخل بدنه ی آن mixin را به دستورات style دهی جاری (rule ها) اضافه می کند. مثال:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

به کد زیر کامپایل می شود:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

Mixin ها می توانند خارج از بدنه ی دستورات style دهی CSS (rule) نیز @include شوند (برای مثال در بالای/root یک فایل)، مادام اینکه property هایی را مستقیما تعریف نکنند یا به selector های میزبان (parent references) اشاره نداشته باشند. مثال:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

پس از کامپایل به کد زیر ترجمه می شود:

a {
  color: blue;
  background-color: red;
}

mixin ها می توانند در بدنه ی خود mixin های دیگری را شامل شوند. مثال:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px;
}

مثال کاربردی

نمونه ی زیر نحوه ی وارد کردن یک mixin در فایل SCSS را با استفاده از دستور @include به صورت کاربردی نمایش می دهد:

sample.htm
< html >
   < head >
      < title > Mixin example of sass< /title >
      < link rel="stylesheet" type="text/css" href="sample.css" / >
   < /head >
   < body >
      < div class="cont" >
         < h2 >Example using include< /h2 >
         < h3 >Different Colors< /h3 >
         < ul >
            < li >Red< /li >
            < li >Green< /li >
            < li >Blue< /li >
         < /ul >
      < /div >
   < /body >
< /html >

سپس، فایل sample.scss را ایجاد نمایید.

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

شما می توانید با اجرای دستور زیر به SASS دستور دهید که بر روی محتوای فایل مورد نظر نظارت داشته و هرگاه در فایل SASS تغییری رخ داد، CSS متناظر را نیز بروز رسانی کند:

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

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

sample.css
.cont {
   background-color: #77C1EF;
   color: #ffffff;
}
h3 {
   color: #ffffff;
}

خروجی

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

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