Question

我无法使用scss calc实现以下两个属性：

transform margin-bottom

这是我的scss：

   @for $i from 1 through 12 {
      div:first-child:nth-last-child(#{$i}),
      div:first-child:nth-last-child(#{$i})~div {
        transform: scale(calc(1-(#{$i}*.1)), calc(1-(#{$i}*.1)));
        margin-bottom: calc(20-#{$i})+px;
      }
    }

这是i=1的输出css：

div:first-child:nth-last-child(1),
div:first-child:nth-last-child(1) ~ div {
  transform: scale(calc(1-(1*.1)), calc(1-(1*.1)));
  margin-bottom: calc(20-1)px;
}

但是，在使用chrome dev工具进行检查时，我会继续为这两个css属性获取invalid property value。知道为什么会这样吗？

Answer 1

您需要在数学运算符周围添加空格（ - ，+，*，％）并包含其单位类型。

你的例子：

transform: scale(calc(1-(1*.1)), calc(1-(1*.1)));
margin-bottom: calc(20-1)px;

正确使用：

transform: scale(calc(1 - (1 * .1)), calc(1 - (1 * .1)));
margin-bottom: calc(20px - 1px);

请注意，这一般适用于CSS，不适用于SCSS。

为什么此scss中存在无效属性

1 个答案: