首页 文章

具有十进制数的Sass控制指令

提问于
浏览
0

我正在努力让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 $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:

@mixin hide( $time ){
  opacity: 0;
  visibility: hidden;
  @include transition( $time );
}

1 回答

  • 1

    您想要的输出是无效的CSS . 从CSS验证器:

    在CSS1中,类名称可以以数字(“ . 55ft”)开头,除非它是一个维度(“ . 55in”) . 在CSS2中,这些类被解析为未知维度(以允许将来添加新单元)为了使“1”成为有效类,CSS2要求第一个数字被转义为“ . \ 31s”[1s]

    当你尝试生成无效的CSS时,很多时候Sass会给你错误 . 要生成有效结果,您需要使用整数组合选择器并添加转义小数点,如下所示:

    @for $i from 1 through 9 {
      .is-hidden-0\.#{$i}s {
        @include hide($i / 10 * 1s);
      }
    }
    

相关问题