دستور mixin و include در Sass [ قسمت پنج ]

  • آخرین بروزرسانی در چهارشنبه 06 ژانویه 2021

    Average rating 5 / 5. Vote count: 1

در قسمت پنجم از آموزش Sass به توضیح و بررسی دستور mixin و include یا فراخوانی کردن آن می پردازیم.

دستور @mixin به شما این امکان را می دهد که کد CSS ای بنویسید که در کل وب سایت شما قابل استفاده مجدد باشد.

دستور @include هم ساخته شده تا به شما امکان فراخوانی یا استفاده از mixin که از قبل نوشته ای را بدهد.

تعریف یک Mixin

شما می توانید با استفاده از دستور @mixin یک mixin در Sass تعریف کنید.

@mixin name {
  property: value;
  property: value;
  ...
} 

مثال زیر یک mixin به نام important-text را می سازد.

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

نکته

توجه داشته باشید که در Sass علامت های خط تیره و زیر خط تفاوتی با هم ندارند. در واقع important-text با important_text در Sass یکی است!

استفاده از Mixin تعریف شده

دستور @include برای فراخوانی یا استفاده از یک mixin استفاده می شود.

selector {
  @include mixin-name;
}

بنابراین، برای فراخوانی mixin که چندی پیش تعریف کردیم یعنی important-text به صورت زیر عمل می کنیم.

.danger {
  @include important-text;
  background-color: green;
}

کامپایلر Sass کد بالا را به صورت زیر به CSS تبدیل می کند:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

شما همچنین می توانید یک mixin را در mixin های دیگر فراخوانی کنید:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

وارد کردن متغیر به Mixin

Mixin ها آرگومان نیز می پذیرند.

به این روش می توانید به یک mixin متغیر وارد کنید.

روش تعریف یک mixin با آرگومان به صورت زیر است:

 /* Define mixin with two arguments */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // Call mixin with two values
}

.myNotes {
  @include bordered(red, 2px); // Call mixin with two values
} 

توجه داشته باشید که آرگومان ها به عنوان متغیر تعیین شده اند و سپس به عنوان مقدار برای رنگ و پهنا خصوصیت border (حاشیه) استفاده شده است.

پس از کامپایل نتیجه به صورت زیر خواهد بود.

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

مقادیر پیشفرض برای Mixin

همچنین امکان تعیین مقادیر پیش فرض برای متغیر های mixin امکان پذیر است:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

در این صورت می توانید از مقادیر پیش فرض mixin به صورت زیر استفاده کنید و مقادیری هم که فرق می کنند را تعیین کنید:

.myTips {
  @include bordered($color: orange);
}

استفاده از Mixin برای پیشوند های Vendor

استفاده دیگری که از mixin ها می شود، برای پیشوند Vendor است.

مثالی برای transform را در ادامه می بینید:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

پس از کامپایل نتیجه به صورت زیر است:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
برای ثبت سفارش برنامه نویسی، طراحی وب سایت، بهینه سازی و... در کاپ کد کلیک کنید.

دیدگاه خود را بیان کنید

@