CSS min() 函数到 SASS

Question

我有如下 CSS 函数：

width: min(calc(100vw - 51rem), calc(100vh - 2rem));

在使用 CSS 文件时可以正常工作，但在 SASS 中使用时就不行了。如何为 SASS 重写这个函数？

Answer 1

当使用 SASS 时，min() 是 SASS 本身中的一个函数，因此您的语句在处理时不会进入您的 CSS。由于 SASS 区分大小写而 CSS 不区分，因此有一个快速的解决方法。只需将 Min() 中的“M”大写。 Min() 语句不会被识别为内部 SASS min() 函数，但可以在 CSS 中工作。

    width: Min(calc(100vw - 51rem), calc(100vh - 2rem));

Answer 2

您可以使用这些 Sass 函数来强制 CSS 函数。

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

结合使用 Sass 变量和 CSS 变量时，您可能仍需要使用 #{ } 插值。

用法：

$width-first: 40px;
$width-second: 30px;

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

编译：

.my-selector {
    width: min(40px, 30px);
}

Answer 3

您可以将min 包装在calc 中，它可以工作：

width: calc(min(calc(100vw - 51rem), calc(100vh - 2rem)));

在您的情况下，您甚至可以简化代码：

width: calc(min(100vw - 51rem, 100vh - 2rem));