میکسین های ساس
این @mixinدستورالعمل به شما امکان می دهد کدهای CSS ایجاد کنید که در سراسر وب سایت مورد استفاده مجدد قرار می گیرد.
این @includeدستورالعمل ایجاد شده است تا به شما اجازه دهد از مخلوط استفاده کنید.
تعریف Mixin
مخلوط با @mixinدستورالعمل تعریف شده است .
نحو Sassmixin:
@mixin name {
property: value;
property: value;
...
}
مثال زیر مخلوطی به نام “important-text” ایجاد می کند:
نحو SCSS:
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
نکته: نکته ای در خط و زیر خط در Sass: خط خط و زیر خط یکسان در نظر گرفته می شوند. این بدان معنی است کهmixin important-text {} وmixin important_text {} به عنوان همان مخلوط در نظر گرفته می شوند!
با استفاده از Mixin
از این @includeدستورالعمل برای ترکیب مخلوط استفاده می شود.
Sass @ شامل ترکیب نحو:
selector {
@include mixin-name;
}
بنابراین ، برای درج متن مهم متن ایجاد شده در بالا:
نحو 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;
}
یک مخلوط می تواند مخلوط های دیگری را نیز شامل شود:
نحو SCSS:
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
عبور متغیرها به Mixin
میکسین ها استدلال ها را می پذیرند. به این ترتیب می توانید متغیرها را به یک mixin منتقل کنید.
در اینجا نحوه تعریف یک مخلوط با آرگومان آورده شده است:
نحو SCSS:
/* 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
}
توجه داشته باشید که آرگومان ها به عنوان متغیر تنظیم می شوند و سپس به عنوان مقادیر (رنگ و عرض) ویژگی حاشیه استفاده می شوند.
پس از تدوین ، 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;
}
سپس ، فقط باید مقادیری را که هنگام وارد کردن مخلوط تغییر می کنند مشخص کنید:
نحو 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);
}
