SASS 数学计算

Posted 2023-03-06

【中文标题】SASS 数学计算

【英文标题】：SASS Math Calculation

【发布时间】：2013-10-01 18:58:58

【问题描述】：

尝试创建响应式视频网格。我希望使用基于 100% 宽度计算的标准 SASS 公式，而不是为每个媒体查询使用不同的 %，但不确定 SASS 是否可以做到这一点。下面公式中的 40 考虑了 2 x 20px 固定边距（即这将是一个 3 列网格）。

理想公式：

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

CSS/SASS 有什么办法可以处理这个问题？如果可能，宁愿不使用 JS。

【参考方案1】：

很遗憾，您无法从 33% 中减去 40px。 SASS 生成一个标准的 CSS 文件供浏览器解释，并且在构建时 SASS 不知道浏览器的尺寸。

但是，您应该能够通过使用 CSS 边距来达到预期的效果，例如

ul.videos 
  li 
     width: (100% / 3);
     div 
         margin: 0 20px;
     
  

【讨论】：

从谷歌搜索，这是我正在寻找的语法。

圆括号是我要找的。不需要 calc()

@TimMedora 的解决方案应该是 IMO 公认的解决方案

【参考方案2】：

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

演示：http://jsfiddle.net/gb5HM/

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

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

规格：http://www.w3.org/TR/css3-values/#calc

【参考方案3】：

另一个较新的浏览器解决方案是使用flexbox display type。它似乎有一个 similar amount of support 作为 calc() （真的只是非常现代的浏览器）。

Sass，或者更具体地说是 Compass，在这里会有一些用处，因为它有 flexbox mixins。