Sass və SCSS-də Mixins.
Mixin, saytımız boyunca yenidən istifadə edə biləcəyimiz CSS kodlarını qruplaşdırmağa imkan verən bir kod blokudur.
Məsələn, HTML elementini Flex elementi kimi göstərməyi götürək.
.row {
display: -webkit-flex;
display: flex;
}Fleks şəklində göstərmək istədiyimiz bir çox element var və bu kodu dəfələrlə yazmaq olduqca cansıxıcı olur. Bu zaman Mixins-dan istifadə olunur.
Mixin yaratmaq çox sadədir, etməyimiz lazım olan @mixin əmrindən sonra boşluq və Mixin adından istifadə etmək, sonra bəzəkli mötərizəmizi açmaq və bağlamaq.
Məsələn:
@mixin flex {
display: -webkit-flex;
display: flex;
}Mixin istifadə etmək üçün sadəcə @include istifadə edirik və ardından Mixin adı və nöqtəli vergül istifadə olunur.
.row {
@include flex;
}Parametrləri Mixin-ə ötürək:
Mixin strukturlarındakı dəyişənlər sayəsində parametrlər əldə edə bilərik.
@mixin a-button($base, $hover, $link) {
a {
background-color: $base;
color: white;
radius: 3px;
margin: 2px;
&:hover {
color: $hover;
}
&:visited {
color: $link;
}
}
}Normal sintaksisdən istifadə edərək dəyişən parametrləri qarışıqlara ötürürük:
.menu-button {
@include a-button(blue, red, green);
}
.text-button {
@include a-button(yellow, black, grey);
}@content
@content Mixin genişləndirilməsinə imkan verir. @Content istifadə edərək bir bloku Mixins-ə ötürə bilərik.
@mixin grid() {
@content;
}Məsələn:
@mixin small() {
@media only screen and (max-width: 320px) {
@content;
}
}
////////////////////@mixin has-content {
html {
@content;
}
}
@include has-content {
#logo {
background-image: url(logo.svg);
}
}
Aşağıdakı CSS çıxışı ilə nəticələnəcəkdir:
html #logo {
background-image: url(logo.svg);
}Xülasə etmək üçün, Mixin quruluşları təkrarlayan kod bloklarını, proqramlaşdırma dillərindəki funksiyalar kimi, bir dəfə təyin edərək istədiyimiz yerdə təkrar istifadə edə bilərik.
Mixins açıq-aşkar çox faydası var.İş axınınızı sürətləndirir və onlarla edə biləcəyimiz çox şey var.
