Sass @mixin and @include

<< مبحث قبلی مبحث بعدی >>

Sass Mixins

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

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

تعریف mixin

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

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

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


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

hyphen و underscore در Sass یکسان هستند. یعنی {}mixin important-text@ و {}mixin imporant_text@ هر دو یک mixin محسوب می‌شوند.

استفاده از یک mixin

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

selector {
    @include mixin-name;
}

بنابراین برای وارد کردن mixin ساخته شده در بالا باید به صورت زیر عمل کنیم:


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

خروجی 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 داد.


/* 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
}

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

خروجی CSS:


.myArticle {
border: 1px solid blue;
}

.myNotes {
border: 2px solid red;
}

<< مبحث قبلی مبحث بعدی >>