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

آموزش Sass – ارسال آرگومان به mixin ها

Mixin ها می توانند مقادیر SassScript (متغیرها) را در قالب آرگومان دریافت کنند. این مقادیر زمانی به عنوان آرگومان به mixin ارسال می شوند که mixin مورد نظر به واسطه ی دستور @include در فایل stylesheet وارد و فراخوانی شده باشد. آرگومان های ارسالی سپس داخل بدنه ی mixin مزبور به عنوان متغیر در دسترس قرار می گیرند. در واقع مقدار متغیر ارسالی داخل mixin در جایگاه اسم متغیر که به عنوان مقدار به property تخصیص یافته، می نشیند.

همان طور که قبلا گفته شد، می توان پس از تعریف mixin به آن مقداری را به عنوان آرگومان ارسال کرد. برای استفاده از mixin باید با درج دستور @include آن را در فایل فراخوانی کرده و آرگومان مورد نظر را به آن ارسال کرد. مقدار آرگومان سپس داخل بدنه ی mixin به عنوان متغیر مورد استفاده قرار می گیرد.

می توان به هنگام تعریف mixin تا چند آرگومان را به آن ارسال کرد. برای این منظور پس از درج دستور @mixin و مشخص کردن اسم آن، آرگومان ها را به صورت متغیر که با ویرگول از هم جدا شده اند، داخل پرانتز قید نمود. سپس زمانی که mixin را با دستور @include فراخوانی کردید، می توانید مقادیر را به همین ترتیب به mixin پاس دهید. مثال:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

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

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

Mixin ها می توانند مقادیری را به عنوان پیش فرض برای آرگومان ها تعریف کنند که در صورت عدم ارسال مقداری از بیرون به عنوان آرگومان به آن mixin، مقدار پیش فرض را بکار ببرد. مثال:

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { 
    @include sexy-border(blue);
}
h1 {
    @include sexy-border(blue, 2in);
}

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

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

ارسال اسم آرگومان به mixin/Keyword Argument

می توان مثال بالا را به صورت زیر نوشت:

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

همان طور می بینید اسم آرگومان ها ($color و $width) که همان متغیر است، این بار به هنگام فراخوانی mixin با دستور @include، در پرانتز جلوی آن ذکر شده است.

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

اسم آرگومان ها (named arguments) را می توان به هر ترتیبی به mixin فرستاد. آرگومان هایی که قبلا مقداری پیش فرض برای آن ها تعیین شده قابل حذف می باشند. از آنجایی که آرگومان های ارسالی (named arguments) همان اسم متغیر هستند، می توان در آن ها از زیرخط (underscore) یا خط تیره (dash) بجای یکدیگر استفاده کرد.

مثال ارسال آرگومان به صورت کلیدواژه (keyword arguments)

یک فایل SASS با محتوای زیر ایجاد نمایید:

@mixin bordered($color, $width: 2px) {
   color: #77C1EF;
   border: $width solid black;
   width: 450px;
}
.style  {
   @include bordered($color:#77C1EF, $width: 2px);
}

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

.style {
   color: #77C1EF;
   border: 2px solid black;
   width: 450px;
}

ارسال تعداد متغیری از آرگومان ها به mixin (Variable argument)

گاهی mixin ها لازم دارند که تعداد نامعلومی آرگومان ورودی دریافت کنند. برای مثال یک mixin که برای تولید سایه در اطراف کادر (box shadow) بکار می رود، ممکن است تعداد زیادی مقدار shadow به عنوان آرگومان دریافت کند. برای چنین شرایطی، زبان پیش پردازنده ی Sass قابلیتی به نام Variable Arguments را پشتیبانی می کند که عملا آرگومان هایی در انتهای تعریف mixin هستند که تمامی آرگومان های باقی مانده را گرفته و آن ها را در قالب list بسته بندی می کند. این آرگومان ها مشابه آرگومان های عادی هستند که در انتهای آن ها "..." درج شده است.

به عبارت ساده، زمانی که تعداد آرگومان های ارسالی نامشخص است، در زمان تعریف mixin بایستی علامت ... را در قسمت آرگومان ها تایپ نمایید:

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

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

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

variable arguments همچنین می توانند keyword argument هایی که به mixin ارسال می شوند را دربرگیرد (keyword argument :اسم متغیر که به عنوان آرگومان به هنگام فراخوانی mixin به آن ارسال می شود). برای دسترسی به اسم متغیرها که به عنوان آرگومان به تابع ارسال شده، می توان از تابع keywords($args) استفاده کرد. خروجی این تابع یک map یا جفت اسم و مقدار بدون علامت $ هست.

variable argument ها می توانند به هنگام فراخوانی یک mixin بکار روند. با استفاده از گرامر نام برده (...)، می توانید list ای از مقادیر را گسترش دهید به طوری که هر مقدار به عنوان یک آرگومان مجزا فرستاده شود. همچنین یک متغیر از جنس map را طوری گسترش دهید که هر جفت اسم و مقدار خود به عنوان یک keyword argument درنظر گرفته شود. مثال:

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary {
  @include colors($value-map...);
}

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

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}
.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

می توانید list و map را به عنوان پارامتر به mixin ارسال کنید. البته مادام اینکه list قبل از map به mixin پاس داده شود، مانند این مثال: @include colors($values..., $map...)..

می توانید با استفاده از امکان variable arguments یک mixin را کپسوله سازی (wrap) نموده و بدون اینکه امضا و آرگومان های (signature) mixin را تغییر دهید، style های بیشتری اضافه نمایید. با این کار keyword argument ها (اسم متغیر که به عنوان آرگومان ارسال می شود) به طور مستقیم به mixin کپسوله سازی شده (wrap شده) فرستاده می شود. مثال:

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}
.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

مثال کاربردی

ابتدا فایل SASS مورد نیاز با محتوای زیر ایجاد نمایید:

@mixin colors($background) {
   background-color: $background;
}
$values: magenta, red, orange;
.container {
   @include colors($values...);
}

کد جاری به فایل CSS که در زیر مشاهده می کنید، ترجمه می شود:

.container {
   background-color: magenta;
}

نمونه ی کاربردی از ارسال آرگومان به mixin

مثال زیر نحوه ی ارسال آرگومان به mixin را به طور کاربردی در فایل scss به نمایش می گذارد:

argument.htm
< html >
   < head >
      < title > Mixin example of sass< /title >
      < link rel="stylesheet" type="text/css" href="argument.css" / >
   < /head >
   < body >
      < div class="style" >
         < h1 >Example using arguments< /h1 >
         < p >Different Colors< /p >
         < ul >
            < li >Red< /li >
            < li >Green< /li >
            < li >Blue< /li >
         < /ul >
      < /div >
   < /body >
< /html >

فایل argument.scss را ایجاد نمایید.

argument.scss
@mixin bordered($width: 2px) {
   background-color: #77C1EF;
   border: $width solid black;
   width: 450px;
}
.style  {
   @include bordered(2px);
}

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

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

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

style.css
.style {
   background-color: #77C1EF;
   border: 2px solid black;
   width: 450px;
}

خروجی

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

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