SASS数学计算

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SASS数学计算相关的知识,希望对你有一定的参考价值。

尝试创建响应式视频网格。我没有为每个媒体查询使用不同的%,而是希望使用基于100%宽度计算的标准SASS公式,但不确定SASS是否可以执行此操作。下面的公式中的40,考虑了2 x 20px的固定余量(即这将是一个3列网格)。

理想配方:

ul.videos {
  li {
     width: ((100% / 3) - 40);
  }
}

CSS / SASS可以处理这个问题吗?如果可能的话,宁愿不使用JS。

答案

不幸的是,你不能从33%中减去40px。 SASS生成一个标准的CSS文件,由浏览器解释,在构建时SASS不知道浏览器的尺寸。

但是,您应该能够通过使用CSS边距来实现所需的效果,例如

ul.videos {
  li {
     width: (100% / 3);
     div {
         margin: 0 20px;
     }
  }
}
另一答案

这在all major browsers使用calc()是可能的。

但是:ぁzxswい

http://jsfiddle.net/gb5HM/

当然,你仍然可以在SASS文件中声明它,但它是一个纯CSS解决方案。在SASS中这是不可能的,因为SASS不知道样式表生成时100%是什么,并且100%的像素值会随着文档大小调整而波动。

规格:li { display: inline-block; width: calc(100% / 3 - 40px); }

另一答案

另一个较新的浏览器解决方案是使用http://www.w3.org/TR/css3-values/#calc。它似乎有一个flexbox display type作为calc()(真的只是非常现代的浏览器)。

Sass,或者更具体地说是指南针,因为它有similar amount of support,所以在这里会有一些用处。

以上是关于SASS数学计算的主要内容,如果未能解决你的问题,请参考以下文章

1-8 Sass的基本特性-运算

scss SASS片段

scss Sass片段:响应视频

Sass预编译 减法及除法计算问题

对可变参数 Sass mixins 进行数学运算

sass:vh 和 px 之间的计算