آموزش ارسال آرگومان Content Block به mixin در Sass

آموزش Sass – ارسال قطعه کد به عنوان آرگومان به یک mixin/ارسال Content Block به mixin

در Sass این امکان تعریف شده که قطعه کدی که حاوی مجموعه ای از دستورات style دهی هست را به عنوان آرگومان به mixin ارسال کرد. این قطعه کد سپس هر جایی که دستور @content در بدنه ی mixin درج شده باشد، داخل style های موجود در mixin می نشیند. بدین وسیله توسعه دهنده می تواند در رابطه با ساخت selector و directive ها، لایه های انتزاعی (abstractions) تعریف و پیاده سازی کند.

مثال:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

کد زیر را تولید می کند:

* html #logo {
  background-image: url(/logo.gif);
}

همین mixin ها را می توان با گرامر مختصر (shorthand syntax) .sass نیز به صورت زیر تعریف کرد:

=apply-to-ie6-only
  * html
    @content
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

حوزه ی دسترسی به متغیر (variable scope) و Content block ها

قطعه کدِ حاوی دستورات style دهی که به عنوان آرگومان به mixin ارسال می شود، در واقع داخل scope یا بدنه ای که قطعه کد در آن تعریف شده، محسابه و ارزیابی می گردد نه در بدنه و حوزه ی دسترسی (scope) mixin مورد نظر. به عبارت دیگر متغیرهایی که به صورت محلی داخل بدنه (حوزه دستری) mixin تعریف شده اند، داخل قطعه کد style دهی ارسال شده به عنوان آرگومان قابل دسترسی و استفاده نیستند و مقادیر این متغیرها نهایتا به عنوان مقدار سراسری (resolve) درنظر گرفته می شوند:

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

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

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

بعلاوه، این امر دقیقا مشخص می کند که متغیرها و mixin هایی که داخل قطعه کد ارسال شده (به عنوان پارامتر) بکار رفته اند، به style های موجود در اطراف جایی که قعطه کد در آن مکان تعریف شده، مربوط می شوند. مثال:

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

مثال کاربردی

مثال زیر ارسال قطعه کدهای style دهی (content block) به عنوان پارامتر به mixin را در فایل SCSS به صورت کاربردی نمایش می دهد:

pass_content.htm
< html >
   < head >
      < title >Mixin example of sass< /title >
      < link rel="stylesheet" type="text/css" href="sample.css" / >
   < /head >
   < body >
      < div class="block" >
         < h1 >Example using passing content blocks< /h1 >
         < p >Different Colors< /p >
         < ul >
            < li >Red< /li >
            < li >Green< /li >
            < li >Blue< /li >
         < /ul >
      < /div >
   < /body >
< /html >

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

sample.scss
@mixin element {
   @content;
}
@include element {
   .block {
      color: green;
   }
}

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

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

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

sample.css
.block {
   color: green;
}

خروجی

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

• کد html بالا را در فایل pass_content.scss ذخیره نمایید.
• اکنون فایل HTML را با مرورگر دلخواه باز نمایید. خروجی بدین صورت در پنجره ی مرورگر به نمایش در می آید: