Search code examples
csssassscss-mixinssass-maps

Use function result as arglist


Is there an intelligent way to use the function result of map.get as an arglist without first saving the list to a variable?

@use "sass:map";

@mixin make-button-size($font-size, $padding-vertical, $padding-horizontal) {
    // make-button-size implementation
}

$sizes: (
    md: (10px, 11px, 12px),
)

$params: map.get($sizes, md);
@include make-button-size($params...);

I tried the following, but this leads to a syntax error:

@include make-button-size((map.get($sizes, md))...);

Solution

  • It is based on https://www.sassmeister.com/ .

    Even if I type the following, the error does not appear.

    @mixin make-button-size($font-size, $padding-vertical, $padding-horizontal) {
        a: $font-size;
        b: $padding-vertical;
        c: $padding-horizontal;
    }
    
    $sizes: (
        md: (10px, 11px, 12px),
    );
    $params: map-get($sizes, md);
    
    p {
      sizes: $params;
      @include make-button-size(map-get($sizes, md)...);
    }
    

    Compiled:

    p {
      sizes: 10px, 11px, 12px;
      a: 10px;
      b: 11px;
      c: 12px;
    }
    

    $sizes: (...) doesn't have a semicolon, so make sure it's not.