KURS ONLINE SASS: @mixin - część 4 z cholera wie ilu

Czerwiec 20 2019
Darmowy kurs online SASS mixin

Kolejna dzień, kolejna cześć darmowego kursu programowania z SASS. Dziś na tapetę weźmiemy sobie mixiny. Jeżeli miałbym je porównać do innych konstrukcji programistycznych to najbliżej im do funkcji które zwrócą nam jakiś gotowy kawałek kodu do naszego selektora.

Zacznijmy od zrobienia sobie w HTML prostego diva z identyfikatorem id=”box” i treścią “Test”. Potem przechodzimy do pliku SCSS i definiujemy sobie jakiś mixin np:

 

@mixin mxauto{

   margin-left: auto;

   margin-right: auto;

}

 

a potem includujemy go do selektora

 

#box{

   @include mxauto;

   height:500px;

   width:500px;

   border:1px solid #444;

}

 

W kodzie wynikowym dostajemy:

 

#box {

  margin-left: auto;

  margin-right: auto;

  height: 500px;

  width: 500px;

  border: 1px solid #444;

}

 

Oczywiście możemy dopisać więcej mixinów i stosować kilka do tego samego selektora lub jeden mixin do wielu selektorów:

 

@mixin flex {

   display: flex;

   justify-content: center;

   align-items: center;

}

@mixin mxauto{

   margin-left: auto;

   margin-right: auto;

}

 

#box{

   @include flex;

   @include mxauto;

   height:500px;

   width:500px;

   border:1px solid #444;

}



Uzyskany efekt w wynikowym kodzie CSS to:

#box {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-left: auto;

  margin-right: auto;

  height: 500px;

  width: 500px;

  border: 1px solid #444;

}



Oczywiście to nie wszystko - w tej formie nasz mixin przypomina trochę funkcję bez parametrów, a przecież funkcje jak wiadomo mogą przyjmować parametry. Spróbujmy zatem napisać kolejny mixin:

 

@mixin flex {

   display: flex;

   justify-content: center;

   align-items: center;

}

@mixin mxauto{

   margin-left: auto;

   margin-right: auto;

}

@mixin prostokat($w:100px, $h:100px, $kolor:#f0f, $zaokraglenie:25px){

   width:$w;

   height:$h;

   border:5px solid $kolor;

   border-radius: $zaokraglenie;

   @include flex;

   @include mxauto;

}

#box{

   @include prostokat(250px, 150px,#FA0);

}

 

I tutaj mamy następujący zapis. Mixin oczekuje 4 parametrów i ma do nich przypisane wartości domyślne:

$w:100px, - odpowiada za szerokość

$h:100px, - odpowiada za wysokość

$kolor:#f0f - kolor obramowania ramki

$zaokraglenie:25px - zaokrąglenie rogów

Dodatkowo do mixina zainkludowane (dołączone) są inne mixiny. Jednak samo wywołanie ma podane tylko trzy parametry, to oznacza że czwarty zostanie dopisany z domyślnych i tak

szerokość wyniesie 250px - bo tak podaliśmy

wysokość wyniesie 150px - bo tak podaliśmy

kolor ramki będzie pomarańczowy bo tak podaliśmy

a zaokrąglenie rogów wyniesie 25px bo nie podaliśmy nic więc weźmie wartość domyślną. Całość wygląda tak:

 

#box {

  width: 250px;

  height: 150px;

  border: 5px solid #FA0;

  border-radius: 25px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-left: auto;

  margin-right: auto;

}


Na dziś to wszysto, ale jeszcze wrucimy do mixinów.


Autor: Geek Factory
Powrót
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.