代码之家  ›  专栏  ›  技术社区  ›  Lovelock

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

  •  0
  • Lovelock  · 技术社区  · 6 年前

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

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

    2 回复  |  直到 6 年前
        1
  •  3
  •   Mark Witmer    6 年前

    删除 . 此时不需要它,因为您没有将该值输出到本机CSS函数。我也建议使用 sassmeister.com

    本答案中的假设:

    • 颜色函数是您自定义的sass函数,它使用sass的RGBA函数。
        2
  •  0
  •   SuperDJ Franklin Rivero    6 年前

    https://codepen.io/corysimmons/pen/mVLVbo . 但是,它是用scss编写的,因此您可能仍需要解决一些问题:

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