Sass @mixin
Sass mixinlari
@mixin direktivasi veb-sayt bo‘ylab qayta ishlatiladigan CSS kodini yaratish imkonini beradi.
@include direktivasi mixindan foydalanish (uni qo‘shish) uchun yaratilgan.
Mixinni aniqlash
Mixin @mixin direktivasi bilan aniqlanadi.
Sass @mixin sintaksisi:
@mixin name {
property: value;
property: value;
...
}
Quyidagi misolda "important-text" nomli mixin yaratiladi:
SCSS sintaksisi:
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Maslahat: Sass’dagi defis va pastki chiziq haqida bir maslahat: defis va pastki chiziq bir xil hisoblanadi. Bu @mixin important-text { } va @mixin important_text { } bitta mixin deb hisoblanishini anglatadi!
Mixindan foydalanish
@include direktivasi mixinni qo‘shish uchun ishlatiladi.
Sass @include mixin sintaksisi:
selector {
@include mixin-name;
}
Demak, yuqorida yaratilgan important-text mixinini qo‘shish uchun:
SCSS sintaksisi:
.danger {
@include important-text;
background-color: green;
}
Sass transpilyatori yuqoridagi kodni oddiy CSS’ga aylantiradi:
CSS natijasi:
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
Mixin boshqa mixinlarni ham o‘z ichiga olishi mumkin:
SCSS sintaksisi:
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
Mixinga o‘zgaruvchilarni uzatish
Mixinlar argumentlar qabul qiladi. Shu tarzda mixinga o‘zgaruvchilarni uzatishingiz mumkin.
Argumentli mixin quyidagicha aniqlanadi:
SCSS sintaksisi:
/* 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
}
E’tibor bering, argumentlar o‘zgaruvchi sifatida belgilanadi va keyin border xususiyatining qiymatlari (rang va kenglik) sifatida ishlatiladi.
Kompilyatsiyadan so‘ng CSS quyidagi ko‘rinishda bo‘ladi:
CSS natijasi:
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
Mixin uchun standart qiymatlar
Mixin o‘zgaruvchilari uchun standart qiymatlarni aniqlash ham mumkin:
SCSS sintaksisi:
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
Shunda mixinni qo‘shayotganda faqat o‘zgaradigan qiymatlarni ko‘rsatishingiz kifoya:
SCSS sintaksisi:
.myTips {
@include bordered($color: orange);
}
Mixindan vendor prefikslari uchun foydalanish
Mixinning yana bir foydali qo‘llanilishi — vendor prefikslari.
Mana, transform uchun misol:
SCSS sintaksisi:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
Kompilyatsiyadan so‘ng CSS quyidagi ko‘rinishda bo‘ladi:
CSS natijasi:
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!