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

你可以用mina 包裹起来calc，它就可以工作：

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

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

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

Answer 3

您可以使用这些 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);
}