css - SASS 数学计算

标签 css responsive-design sass

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

理想公式:

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

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

最佳答案

这在 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

关于css - SASS 数学计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19017555/

相关文章:

javascript - iframe 包装元素上的单击事件

javascript - JS 脚本在 HTML 中的位置

css - 使用 nth 时,Sass 嵌套列表在每个循环上出现索引错误?

html - 浏览器不读取从 SASS 编译到 css 文件

html - 未应用 scss 类

javascript - 从 Javascript 更改 CSS 属性

jquery - Twitter Bootstrap 导航可在桌面上运行,但不适用于移动设备

html - 如何让两个垂直元素之一的高度依赖于另一个?

google-chrome - 媒体查询在我手动调整浏览器大小时有效,但在我使用 Chrome 的 'Responsive' 中的 'Inspection' 功能时无效

css - 我的 "main content"从侧边栏的末尾开始...帮助!