SASS даги миксинлар параметрлари

SASS даги миксинларнинг муҳим хусусияти шундан иборатки, улар параметрлар ичида ёзиладиган ва агар бир нечта ўзгарувчи бўлса, улар вергул билан ажратиладиган ўзгарувчиларни қабул қилади.

Келтирилган мисолни кўриб чиқайлик:

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

Компиляция натижаси:

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

Бундан ташқари, миксинларга стандарт қийматларни ҳам бериш мумкин:

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

Компиляциядан сўнг биз кўрамиз:

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);
}