带有十进制数字的 Sass 控制指令答案

【问题标题】：Sass control directive with decimal numbers带有十进制数字的 Sass 控制指令
【发布时间】：2015-05-27 13:31:16
【问题描述】：

我正在尝试运行一个 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....

谢谢！

--- 编辑 --- 这是 hide mixin：

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

【问题讨论】：

你试过了吗：@include hide(#{$value}#{s}))
能不能把hidemixin的代码也发一下？
也相关：stackoverflow.com/questions/30137176/…

标签： sass

【解决方案1】：

您想要的输出是无效的 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);
  }
}

【讨论】：

成功了，谢谢！为其他人澄清：呈现的 css 类将是：“.is-hidden-0\.1s”，但您可以只使用“.is-hidden-0.1s”

【解决方案2】：

这是为类名转义十进制数字的一般方法（将 . 替换为 -）

@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;
}

【讨论】：