sass中使用calc传入变量无效_html/css

来源：动视网责编：小采时间：2020-11-27 16:39:53

sass中使用calc传入变量无效_html/css

sass中使用calc传入变量无效_html/css_WEB-ITnose:是的，我又用上 sass 了，新公司在用，所以就又写 sass 了。然后今天遇到的小问题，随手记一下当我们用 sass 写如下代码的时候 .class{ $padding: 5px; width: calc(100% - $paddding * 2);} 嗯嗯，看上去好像很正常。错。编译完了之后

推荐度：

点击下载本文 文档为doc格式

导读sass中使用calc传入变量无效_html/css_WEB-ITnose:是的，我又用上 sass 了，新公司在用，所以就又写 sass 了。然后今天遇到的小问题，随手记一下当我们用 sass 写如下代码的时候 .class{ $padding: 5px; width: calc(100% - $paddding * 2);} 嗯嗯，看上去好像很正常。错。编译完了之后

是的，我又用上 sass 了，新公司在用，所以就又写 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，解决！

sass中使用calc传入变量无效_html/css

推荐度：

点击下载本文 文档为doc格式

标签：使用 html ca

热门焦点

sass中使用calc传入变量无效_html/css

sass中使用calc传入变量无效_html/css

sass中使用calc传入变量无效_html/css

最新推荐

猜你喜欢

热门推荐