SASS miksinu parametri

Svarīga SASS miksinu īpatnība ir tā, ka tie pieņem mainīgos parametros, kas tiek rakstīti iekšā apaļajās iekavās un, ja ir vairāki mainīgie, tad tos atdala ar komatiem.

Apskatīsim šādu piemēru:

styles.scss@mixin active($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow, 2px);
}

Kompilācijas rezultāts:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dashed; 
}

Papildus tam, miksinos var padot noklusējuma parametru vērtības:

styles.scss@mixin active($color,  $width: 2px) {
  border: {
    color: $color;
    width: $width;
    style: dotted;
  }
}
p {
  @include active(yellow);
}
div {
  @include active(yellow, 4px);
}

Pēc kompilācijas mēs redzēsim:

styles.cssp {
  border-color: yellow;
  border-width: 2px;
  border-style: dotted;
}
div {
  border-color: yellow;
  border-width: 4px;
  border-style: dotted;
}

styles.scss@mixin simple-border($padding-top, $padding-bottom) {
  border: {
    padding-top: $padding-top;
    padding-bottom: $padding-bottom;
    color: green;
  }
}
p {
  @include simple-border(10px, 30px );
}        

styles.scss@mixin simple-border($padding-top, $padding-bottom: 20px) {
  border: {
  padding-top: $padding-top;
  padding-bottom: $padding-bottom;
  color: green;
  }
}
p {
  @include simple-border(10px);
}