Domieszki w SASS (Mixins) to bloki z wyglądu pełniące rolę funkcji, które mogą być używane w różnych miejscach przekazując do nich argumenty. Są przydatne gdy chcemy w wielu miejscach wykorzystać ten sam zestaw styli.
Domieszki definiujemy przy pomocy słowa kluczowego @mixin
na początku, następnie nazwa i parametry. W miejscu gdzie chcemy użyć domieszki używamy słowa kluczowego @include
następnie jej nazwa i argumenty.
Moduły w CSS to osobne pliki, które są ładowane przy pomocy słowa kluczowego @use
a następnie nazwy domieszki, funkcji lub zmiennej z innego pliku do zaimportowania. Niektóre transpilatory nie wspierają modułów a jedynie domieszki lub ładowanie całych plików przy pomocy @import
i nazwy pliku.
// SASS
@mixin button($bg, $color) {
background: $bg;
color: $color;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-family: sans-serif;
}
.btn-primary {
@include button(#3f3aaf, #fff);
}
.btn-secondary {
@include button(#e600ac, #fff);
}
.btn-tertiary {
@include button(#ffffb3, #000);
}
Po transpilacji poskutkuje arkuszem CSS:
/* CSS */
.btn-primary {
background: #3f3aaf;
color: #fff;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-family: sans-serif;
}
.btn-secondary {
background: #e600ac;
color: #fff;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-family: sans-serif;
}
.btn-tertiary {
background: #ffffb3;
color: #000;
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-family: sans-serif;
}
Ćwiczenie 1 - Przygotuj domieszkę, która posłuży do szybkiego zdefiniowania 5 prostokątów o różnych kolorach tła i kolorach fontu. Każdy prostokąt powinna mieć font o rozmiarze 1rem, zaokrąglenie 20%, minimalną wysokość 300px i szerokość 100%.
Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dowiedz się więcej jak je wyłączyć. Ta strona jest chroniona przez reCAPTCHA i Google polityka prywatności Google i regulamin Google.