What is the correct syntax for variables?

Question

Sass

Trying to rewrite mixin from SASS to STYLUS .

here is the original in SASS

@mixin adaptive-value($property, $startSize, $minSize, $type){
  $addSize: $startSize - $minSize;
  @if $type== 1 {
      #{$property}: $startSize + px;
      @media(max-width: #{$maxWidthContainer + px}) {
          #{$property}: calc(#{$minSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidthContainer - 320}));
}
}
  @else if $type== 2{
    #{$property}: $startSize + px;
    @media(min-width: #{$maxWidthContainer + px}) {
      #{$property}: calc(#{$minSize + px } + #{$addSize} * ((100vw - 320px) / #{$maxWidth- 320}));
      }
      
    }
  @else {
    #{$property}: calc(#{minSize + px } + #{$addSize} * ((100vw - 320px) / #{$maxWidth- 320} ));
    }
}

///////////////////////////

I get the following

adaptive-value(property, startSize, minSize, type )
  addSize = startSize - minSize	
  if type==1
    {property}: startSize 
    @media(max-width: $maxWidthContainer px)
      {property}: calc(var(minSize) + addSize * ((100vw - 320px) / ($maxWidthContainer - 320)))
  else if type==2
    {property}: startSize
    @media(min-width:  $maxWidthContainer px)
      {property}: calc(minSize + addSize * ((100vw - 320px) / ($maxWidth- 320)))
  else
    {property}: calc(minSize  + addSize * ((100vw - 320px) / ($maxWidth- 320)))

The problem is that all variables below the media query, that is, those that go in brackets as CALC arguments, are not read in any way.
I tried wrapping them like this -- {} , and like this -- #{} , and like this ${} , both in quotes and in back quotes -- `${} ` , but the compiler swears, and in general, up to variables cannot be accessed. Before the CALC function, by the way, everything is displayed, for example, in media query brackets. I don't know how to write variables correctly.

Answer 1

It was worth reformulating the question - and the answer was found. The problem is not with interpolation at all, but with the use of a variable inside the calc function.
Here it is necessary to apply the following syntax
- quote the calc function itself as a string, and substitute the sign %s instead of variables, followed by decoding in brackets.
mixin works. already checked
it looks like this

adaptive-value(property, startSize, minSize, type)
  addSize= startSize - minSize;
  if type== 1
    {property}: startSize px;	
    @media(max-width: $maxWidthContainer  px)
      {property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidthContainer)

  else if type== 2
    {property}: startSize px;
    @media(min-width: $maxWidthContainer  px)
      {property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidth)

  else
    {property}: "calc(%spx +  %s * ((100vw - 320px) / (%s - 320)))" % (minSize addSize $maxWidth)

Answer 2

In general, braces are used for interpolation in stylus
https://stylus-lang.com/docs/interpolation.html
How exactly does your compiler swear?