scsssass calc 的mixin&include 处理方法
前言
目前主流的浏览器对于calc属性已经支持得非常好了.所以,我准备在我们的新项目中全面启用这个属性,省得在布局方面还得用js去实现.经过详细的布局测试,总算做出来了一个demo页面.在各个pc浏览器上没有任何问题,甚至IE9都没有问题.
于是,拿在移动端上测试,结果发现,移动端大多数新款手机的支持度都是相当不错的.不过我还是崩溃了,因为,在安卓微信上,出现了不支持calc的情况.
这是一个很严重的问题.如果微信上不支持的话,那么在很多的微信推广中就不能使用我们做的这个项目了,这兼职是不能容忍的事情.所以,一定要兼容微信自带浏览器.
于是,我们尝试给calc加上-webkit-前缀.经过测试,微信是支持的.这是一个好消息,至少我不用推倒重来了.
好吧,每一个地方都需要写两个参数,这点确实是有点不爽.于是,我准备构造一个scsssass mixin,用来混入,这样就可以更方便的来解决问题了.
错误的尝试
scsssass mixin
代码语言：javascript复制@mixin wcalc ($exp) {
width: -moz-calc($exp);
width: -webkit-calc($exp);
width: calc($exp);
}scsssass include
代码语言：javascript复制@include wcalc(100% * 2 / 3 - 6rem);编译报错,一直报错~
于是还是各种google资料,但是要么是英文的我看不懂,要么完全不是一回事儿.在群里问朋友,有一个朋友给了一个less的解决方法,我尝试了一下,完全不起作用.
但是最终经过尝试,还是解决了这个问题
正确的方法
scsssass mixin
代码语言：javascript复制@mixin wcalc ($exp) {
width: -moz-$exp;
width: -webkit-$exp;
width: $exp;
}scsssass include
代码语言：javascript复制@include wcalc(calc(100% * 2 / 3 - 6rem));误打误撞找到了这个方法,因为在scsssass中,他会自动的去运算.我能够理解上面错误的尝试中的方法为什么报错,因为他运算了.
而我在正常的scsssass中去写 calc(表达式)的时候,它没有运算,也许scsssass的编译,就是判断这个表达式是不是在calc中,如果在,那就不运算,如果不在,就运算(纯属猜测).于是尝试这样写,结果问题解决了.
现在就一个问题,就是这样写很不优雅,不知道有没有更好的解决方法.
如果没有更好的解决方法的话,至少我这个方法是可以用的方法.
PS: calc兼容性列表 css3的calc()使用
FungLeo by FengCMS 版权所有 2015.12.22
2015年12月23日补充
今天对于这个问题还是耿耿于怀,于是,再次谷歌,终于找到了最优雅的解决方法
代码语言：javascript复制@mixin calc($property, $expression) {
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
.test {
@include calc(width, "25% - 1em");
} 原文地址:http://stackoverflow.com/questions/10826064/calc-element-in-sass-css
