sass 中使用 calc 传入变量无效

该文章由 leevare 发布于 ,归类于 Sass

当我们用 sass 写如下代码的时候

.class{
    $padding: 5px;
    width: calc(100% - $paddding * 2);
}

嗯,看上去好像很正常。。。

错!! 编译完了之后,你会发现这段代码是这样的

.class{
    width: calc(100% - $padding * 2);
}

然后浏览器就无情的忽略掉这一行谜一样的样式了 好吧,看样子 sass 在编译的时候,把括号里面的变量当做字符串处理了。 所以我们该怎么办呢? 还记得 sass 怎么在字符串里拼接变量么? 就是它!

.class{
    $padding: 5px;
    width: calc(100% - #{$paddding * 2});
}

OK,解决!

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒