mixin و @include Sass

Sass Mixin

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

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

در اینجا mixin به نام "important-text" ایجاد می‌شود:

نوع دستور زبان SCSS:

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

توجه:

توجه به املای Hyphen و Underscore در Sass: Hyphen و Underscore به عنوان یکسان در نظر گرفته می‌شوند.

این به این معنی است که @mixin important-text { } و @mixin important_text { } به عنوان یک mixin مشابه در نظر گرفته می‌شود!

استفاده از Mixin

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

قوانین Sass برای استفاده از mixin @include:

selector {
  @include mixin-name;
{}

بنابراین، برای استفاده از mixin important-text ایجاد شده،

نوع دستور زبان SCSS:

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

ترجمه‌کننده Sass کد مذکور را به CSS معمولی تبدیل خواهد کرد:

خروجی CSS:

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

Mixin می‌تواند mixin‌های دیگر را نیز شامل شود:

نوع دستور زبان SCSS:

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

ارسال متغیرها به Mixin

Mixins پارامترها را می‌پذیرند. از این طریق می‌توانید متغیرها را به mixin ارسال کنید.

در اینجا روش تعریف mixin با پارامترها آورده شده است:

نوع دستور زبان SCSS:

/* تعریف mixin با دو پارامتر */
@mixin bordered($color, $width) {
  border: $width solid $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // فراخوانی mixin با دو مقادیر
{}
.myNotes {
  @include bordered(red, 2px); // فراخوانی mixin با دو مقادیر
{}

لطفاً توجه کنید که پارامترها به عنوان متغیرها تنظیم شده‌اند و سپس به عنوان مقادیر ویژگی‌های لبه استفاده می‌شوند (رنگ و عرض).

پس از ترجمه، CSS به صورت زیر خواهد بود:

خروجی CSS:

.myArticle {
  border: 1px solid blue;
{}
.myNotes {
  border: 2px solid red;
{}

مقادیر پیش‌فرض mixin

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

نوع دستور زبان SCSS:

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

سپس، شما باید فقط مقدار مورد نظر خود را برای mixin مشخص کنید که می‌خواهید تغییر دهید:

نوع دستور زبان SCSS:

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

استفاده از mixin به عنوان پیش‌پایه توزیع‌کنندگان

یکی از کاربردهای خوب mixin برای (پیش‌پایه) توزیع‌کنندگان است.

این یک مثال از تبدیل است:

نوع دستور زبان SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
{}
.myBox {
  @include transform(rotate(20deg));
{}

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

نوع دستور زبان CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
{}