sass: sass wont let me use css min()

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

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

Hi is there a way to disable min/max and use the browser ones? Or else some syntax to use them instead of sass ones? Thanks

Edit: Spoke too soon, found a solution for now: margin-bottom: m#{a}x(5vh, 60px);

I found a simple and fairly clean workaround.

max-height: #{"min(50vh, 500px)"};

use uppercase Min() both css and scss understand, no error

How about #{if($var < 100%, $var, 100%)}? I used that as a workaround.

@DominicTobias-b1 this is terrible, I love it

I ended up using:

font-size: unquote('min(#{$var1}, #{$var2})');

It’s not just Dart Sass. Libass does it as well. Dart Sass is a little less vulnerable, it will still try to use the Sass function when there is no reason to. Here’s an example from my current project.

The following trips up Libsass since it tries to use the Sass max() function with incompatible units. Dart Sass handles it fine, though.

.subsection-menu {
  font-size: 0.85em; // fallback
  font-size: max( 0.85em, 16px );
}

The following, however, throws an error (incompatible units) with both Libsass and Dart Sass.

$font-size-small: 16px;

.subsection-menu {
  font-size: 0.85em; // fallback
  font-size: max( 0.85em, $font-size-small ); 
}

You might say I could just use the second version and interpolate $font-size-small. That would work. But interpolating all the time is annoying and my own function doesn’t require that in most cases.

I also need to consider compatibility between compilers. Libsass tries to use the Sass function, interpolation or not, so there’s just no way it’ll work there.

At the moment, Dart Sass has a few annoyances (see this infuriating issue), so we can’t fully switch yet.

Since CodeKit updated Libsass and added Dart Sass, all calculated numbers have had a whopping 10 decimal places, which I feel uselessly lengthens my final stylesheet and makes things uglier in the inspector. If 33.3333% and 33.3333333333% are still the same over 2000 pixels, why should I bloat up my stylesheet further?

I’ve strayed off-topic, but the gist of what I’m trying to say is: I’ve barely started using Dart Sass and I’ve already got those reasons not to fully trust it yet. So we probably shouldn’t be coding stuff that Libsass won’t also take for now.