带十进制数的Sass控制指令
我正在尝试启动sass函数:带十进制数的Sass控制指令,sass,Sass,我正在尝试启动sass函数: $times: 0.10 0.20 0.30 0.40 0.50 0.60 0.70 0.75 0.80 0.90; @each $value in $times{ .is-hidden-#{$value}{ @include hide( $value + s ); } } 问题是:不知何故,它不接受十进制数字。它与1、2、3等完美配合。我甚至尝试过: $times: 10 20 30 40 50 60 70 80 90; @each $val
$times: 0.10 0.20 0.30 0.40 0.50 0.60 0.70 0.75 0.80 0.90;
@each $value in $times{
.is-hidden-#{$value}{
@include hide( $value + s );
}
}
问题是:不知何故,它不接受十进制数字。它与1、2、3等完美配合。我甚至尝试过:
$times: 10 20 30 40 50 60 70 80 90;
@each $value in $times{
.is-hidden-#{$value}{
@include hide( ($value / 100) + s );
}
}
但是sass对最后的计算没有任何作用。他只是忽略了“/100”。有什么方法可以通过这样的函数传递十进制数吗?输出结果如下:
.is-hidden-0.1s{
}
.is-hidden-0.2s{
}
.is-hidden-0.3s{
}
etc....
谢谢
---编辑---
这是隐藏混音:
@mixin hide( $time ){
opacity: 0;
visibility: hidden;
@include transition( $time );
}
您想要的输出是无效的CSS。从CSS验证程序: 在CSS1中,类名可以以数字(“.55ft”)开头,除非它是维度(“.55in”)。在CSS2中,此类类被解析为未知维度(以允许将来添加新单元)以使“1s”成为有效类,CSS2要求对第一个数字进行转义。“\31s”[1s] 当您试图生成无效的CSS时,Sass会在很多情况下给您带来错误。要生成有效结果,您需要使用整数组合选择器,并添加转义小数点,如下所示:
@for $i from 1 through 9 {
.is-hidden-0\.#{$i}s {
@include hide($i / 10 * 1s);
}
}
下面是一种对类名的十进制数进行转义的通用方法(将
您是否尝试过:
@include hide(#{$value}{s}))
您是否也可以发布hide
mixin的代码?同样相关:成功了,谢谢!为了向其他人澄清:呈现的css类将是:“.is-hidden-0\.1s”,但您可以只使用“.is-hidden-0.1s”
@function strip-units ( $number ) {
@return $number / ( $number * 0 + 1 );
}
@function escape-number ( $value ) {
@if type-of( $value ) != 'number' {
@return $value;
}
$int: floor( strip-units( $value ) );
$fract: $value - $int;
@if ( $fract == 0 ) {
@return $int;
}
@while ( $fract != floor( $fract ) ) {
$fract: $fract * 10;
}
@return $int + '-' + $fract;
}