带有十进制数字的 Sass 控制指令 [英] Sass control directive with decimal numbers

问题描述

我正在尝试启动 sass 功能:

I'm trying to get a sass function going:

$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 等.我什至尝试过:

The problem is this: somehow, it doesn't accept decimal numbers. It works perfectly with 1, 2, 3, etc. I even tried this:

$times: 10 20 30 40 50 60 70 80 90;

@each $value in $times{
  .is-hidden-#{$value}{
    @include hide( ($value / 100) + s );
  }
}

但是 sass 对那里的最后一个计算没有做任何事情.他只是忽略了'/100'.有什么方法可以通过这样的函数传递十进制数吗?输出将是这样的:

But sass doesn't do anything with that last calculation there. He just ignores the '/ 100'. Is there some way I can pass decimal numbers through a function like this? The output would be this:

.is-hidden-0.1s{

}

.is-hidden-0.2s{

}

.is-hidden-0.3s{

}

etc....

谢谢！

--- 编辑---这是隐藏混合:

--- EDIT --- This is the hide mixin:

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

推荐答案

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

Your desired output is invalid CSS. From the CSS validator:

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

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units) To make "1s" a valid class, CSS2 requires the first digit to be escaped ".\31s" [1s]

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

There are many times where Sass will give you errors when you try to generate invalid CSS. To generate valid results, you need to compose the selector using integers and adding the escaped decimal point like this:

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

这篇关于带有十进制数字的 Sass 控制指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！