Блог

итак, я пытался разобраться в этом, но, возможно, я просто бьюсь головой о стену. Я пытаюсь создать sass mixin, который использует нулевые аргументы, так что аргумент не будет включен, если только значение специально не присвоено выводу, например:

 // main mixin

@mixin fontSettings(
    $font-size: null,
    $line-height: null,
    ) 
{
 // if null, get the default value
   @if not $font-size {
       $font-size: -get-font-defaults(font-size);
   }
 // if null get, default value
   @if not $line-height {
    $line-height: -get-font-defaults(line-height);
    }
  // calculate font stuff
    $font-size: $font-size * 1rem;
    $line-height: $line-height * 1rem;
 //output
    font-size: $font-size;
    line-height: $line-height;

}

// map merge mixin
@mixin -set-font-defaults() {
    $-font-defaults: map-merge($-font-defaults, keywords($defaults)) !global;
}

// function to get map values
@function -get-font-defaults($key){
    @return map-get($-font-defaults, $key);
}

//  default settings config map
$-font-defaults: (
    'font-size': 1.2,
    'line-height': 2,
);
  

и использование было бы

 p {
 //output sets fontsize to 12px and line height to 20px
 @include fontSettings;
}
  

мой вопрос в том, есть ли какой-либо способ сократить это без необходимости выполнять проверку @if для каждого аргумента? например, использовать цикл @each для перебора аргументов? Я продолжаю получать недопустимые операции с нулем, если не выполню проверку для каждого аргумента отдельно. если нет способа сократить это с помощью цикла, то я соглашусь с этим, поскольку я новичок, но если есть способ сократить это, я был бы признателен за совет о том, как это сделать. Я планирую добавить больше аргументов к микшированию, это всего лишь тест с двумя. заранее спасибо за любую помощь.

Есть более простой способ, вам нужно использовать необязательные параметры миксина в свою пользу. Использование необязательных параметров без их определения позволяет использовать значения по умолчанию, установленные в объявлении, как в примере ниже.

 @mixin fontSettings($font-size: 1.2, $line-height: 2) {
    font-size: $font-size * 1rem;
    line-height: $line-height * 1rem;
}