sass wont let me use css min()

I have css code like this:

–min: 250px; width: min( var(–min), 100%);

Sass breaks with error: Error: “var(–card-min)” is not a number for `min’

I think its trying to use some function called min and not css min. How can i tell it to not do this or ignore sass for this line?

[daniel-vz7]

If anybody is getting this issue you can simply bypass the Sass min() or max() function capitalizing them. It won’t be recognized by Sass compiler, but it’ll continue working on CSS.

e.g. Instead of using font-size: min(1.3vw, 17px); You write it as font-size: Min(1.3vw, 17px);

[Ariane-B]

This was annoying me a lot (in Dart Sass 1.26.3), since it was making the use of CSS min/max functions really unreliable, so I created a Sass function to force the CSS functions. Use them if you’d like.

@function css-function( $function, $values... ) {
	@return 
		$function
		+ unquote( '(' )
		+ $values
		+ unquote( ')' )
	;
}

@function css-min( $values... ) {
	@return css-function( min, $values );
}

@function css-max( $values... ) {
	@return css-function( max, $values );
}

@function css-clamp( $values... ) {
	@return css-function( clamp, $values );
}

You might still need to use #{ } interpolation when using Sass variables and CSS variables combined with them though, in some cases, to make sure Sass parses them properly. So:

.my-selector {
  width: css-min( #{ $width-abs }, #{ $width-rel } );
}