SASS数学计算

Jim西里2020-03-23

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

理想公式：

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

CSS / SASS可以处理这种情况吗？如果可能，不希望使用JS。

神无2020/03/23 20:03:35

在所有使用的主流浏览器中都可以这样做calc()。

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

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

神乐2020/03/23 20:03:35

另一个较新的浏览器解决方案是使用flexbox显示类型。它似乎具有与 calc（）类似的支持量（确实是非常现代的浏览器）。

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

泡芙2020/03/23 20:03:35

不幸的是，您不能从33％中减去40px。SASS生成一个标准的CSS文件，以供浏览器解释，并且在构建时SASS不知道浏览器的尺寸。

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

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

Newest Answer