[HTML|JS|CSS] Sass : Mixiny

Mixiny są czymś, co pozwala znacznie zredukować ilość kodu w pliku .scss. Są to bloki kodu, które możemy wstawiać do selektorów za pomocą instrukcji @include. Każdy mixin może zależeć od parametrów, które podawane są w nawiasie. Podczas deklaracji możemy sobie ustalić domyślną wartość paramtru. Wtedy nie musimy za każdym razem podawać tej samej wartości. Zawartość mixina w momencie tłumaczenia instruckji @include zostanie wstawiona w jej miejscu, nie naruszając pozostałych wartości w selektorze. Należy pamiętać, że jeżeli mixin definiuje właściwość zdefiniowaną również w selektorze poza mixinem, to zostanie zastosowana ostatnia wartość.

Przykład:

@mixin red-bordered($wdth : 5px)
{
 border-width : $wdth;
 border-color : red;
}

@mixin margined-slightly
{
 margin: 2px, 2px, 2px, 2px;
}

.bordered-button
{
 @include red-bordered;
 @include margined-slightly;
}

.bordered-div
{
 font-size: 15px;
 @include red-bordered(10px);
}

Po transformacji:

.bordered-button {
  border-width: 5px;
  border-color: red;
  margin: 2px, 2px, 2px, 2px; }

.bordered-div {
  font-size: 15px;
  border-width: 10px;
  border-color: red; }