Css 循环内SASS插值将增量转换为字符串

我要创建一个SASS循环来创建一些实用程序类：

@for $i from 1 through 10 {
    &border-white-#{($i * 10)} {
        border-color: color($color-white, #{$i / 10});
    }
}

此颜色函数设置RGBA alpha值，但SASS当前表示alpha值必须是整数，但提供了字符串

检查值的类型_时，它显示字符串

---

如何将此插值转换为整数？

我有以下函数，可以将字符串转换为整数。该函数似乎来自：。但是，它是用SCS编写的，因此您可能仍需要解决一些问题：

@function number( $value ) {
    @if type-of( $value ) == 'number' {
        @return $value;
    } @else if type-of( $value ) != 'string' {
        $_: log( 'Value for `to-number` should be a number or a string.' );
    }

    $result: 0;
    $digits: 0;
    $minus: str-slice( $value, 1, 1 ) == '-';
    $numbers: ( '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9 );

    @for $i from if( $minus, 2, 1 ) through str-length( $value ) {
        $character: str-slice( $value, $i, $i) ;

        @if not ( index( map-keys( $numbers ), $character ) or $character == '.') {
            @return to-length( if( $minus, -$result, $result ), str-slice( $value, $i ) )
        }

        @if $character == '.' {
            $digits: 1;
        } @else if $digits == 0 {
            $result: $result * 10 + map-get( $numbers, $character );
        } @else {
            $digits: $digits * 10;
            $result: $result + map-get( $numbers, $character ) / $digits;
        }
    }

    @return if( $minus, -$result, $result );
}

然而，正如所指出的那样。您已经在使用整数，但正在将其转换为字符串

{$i/10}

试着重复你已经做过的事情

&border-white-#{($i * 10)} {
     border-color: color($color-white, ($i / 10));
}

---

但是，问题可能是

RGBA（）

需要一个

注释值，例如：

RGBA（255，255，255.5）

我有以下函数，可以将字符串转换为整数。该函数似乎来自：。但是，它是用SCS编写的，因此您可能仍需要解决一些问题：

@function number( $value ) {
    @if type-of( $value ) == 'number' {
        @return $value;
    } @else if type-of( $value ) != 'string' {
        $_: log( 'Value for `to-number` should be a number or a string.' );
    }

    $result: 0;
    $digits: 0;
    $minus: str-slice( $value, 1, 1 ) == '-';
    $numbers: ( '0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9 );

    @for $i from if( $minus, 2, 1 ) through str-length( $value ) {
        $character: str-slice( $value, $i, $i) ;

        @if not ( index( map-keys( $numbers ), $character ) or $character == '.') {
            @return to-length( if( $minus, -$result, $result ), str-slice( $value, $i ) )
        }

        @if $character == '.' {
            $digits: 1;
        } @else if $digits == 0 {
            $result: $result * 10 + map-get( $numbers, $character );
        } @else {
            $digits: $digits * 10;
            $result: $result + map-get( $numbers, $character ) / $digits;
        }
    }

    @return if( $minus, -$result, $result );
}

然而，正如所指出的那样。您已经在使用整数，但正在将其转换为字符串

{$i/10}

试着重复你已经做过的事情

&border-white-#{($i * 10)} {
     border-color: color($color-white, ($i / 10));
}

然而，问题可能是

RGBA（）

需要一个

注释值，例如：

RGBA（255，255，255，.5）

删除颜色（$color white，{$i/10}）；“中的{}。此时不需要它，因为您没有将该值输出到本机CSS函数。我还建议使用它进行快速Sass调试

本答案中的假设：

• 颜色函数是使用sass的RGBA函数的自定义sass函数

删除颜色（$color white，{$i/10}）中的{}。此时不需要它，因为您没有将该值输出到本机CSS函数。我还建议使用它进行快速Sass调试

本答案中的假设：

• 颜色函数是使用sass的RGBA函数的自定义sass函数