[英]SASS Interpolation within loop converting increment to string
I have a SASS loop to create to create some utility classes: 我创建了一个SASS循环来创建一些实用程序类:
@for $i from 1 through 10 {
&border-white-#{($i * 10)} {
border-color: color($color-white, #{$i / 10});
}
}
This color function sets the RGBA alpha value but SASS is currently saying that the alpha value must be an integer but a string is provided. 此颜色函数设置RGBA alpha值,但SASS当前表示alpha值必须为整数,但提供了字符串。
When checking the type_of the value it shows string. 在检查type_of值时,它显示字符串。
How can I convert this interpolated value to an integer? 如何将该插值转换为整数?
Remove the #{} within the "color($color-white, #{$i / 10});" 删除“ color($ color-white,#{$ i / 10});”中的#{}; . 。 It's not needed at that point since you're not outputting that value to a native CSS function. 那时不需要,因为您没有将该值输出到本地CSS函数。 I'd also suggest using sassmeister.com for quick Sass debugging. 我也建议您使用sassmeister.com进行Sass快速调试。
Assumptions in this answer: 在这个答案中的假设:
I have the following function that should convert a string to a integer. 我有以下函数应将字符串转换为整数。 The function seems to come from: https://codepen.io/corysimmons/pen/mVLVbo . 该功能似乎来自: https : //codepen.io/corysimmons/pen/mVLVbo 。 However it is written in scss so you might still need to fix some issues: 但是,它是用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 );
}
However as pointed out. 但是如前所述。 You are already working with integers but are casting it to a string #{$i / 10}
. 您已经在使用整数,但是将其强制转换为字符串#{$i / 10}
。
Just try to repeat of what you already have done. 只需尝试重复已完成的操作即可。
&border-white-#{($i * 10)} {
border-color: color($color-white, ($i / 10));
}
The problem with this however may be that RGBA()
expects a .
但是,与此有关的问题可能是RGBA()
期望为.
notated value for example: rgba(255, 255, 255, .5)
标记值,例如: rgba(255, 255, 255, .5)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.