sass：vh 和 px 之间的计算

Posted 2023-03-06

【中文标题】sass：vh 和 px 之间的计算

【英文标题】：sass: calculation between vh and px

【发布时间】：2017-02-16 14:46:33

【问题描述】：

我的登陆屏幕上有一个幻灯片，我希望它是全屏的，并带有一个 70 像素高度的导航栏，我正在尝试使用 sass，这样我就不必为此编写 javascript 代码，但是

.slideshowheight:100vh-70px

不起作用。不知道sass是怎么计算出来的，css原来是

.slideshowheight:99.27083vh

我对此问题进行了快速搜索，但找不到任何有用的信息。那么这是否可行？

如果没有，是否可以不使用 javascript？

【问题讨论】：

试试calc()——一个CSS特性。

【参考方案1】：

尝试使用 CSS 计算。很漂亮widely supported。

.slideshow 
    height: calc( 100vh - 70px );

【讨论】：

subarashiii *o*

【参考方案2】：

不，不是。

在将 SASS 编译为 CSS 时执行 SASS 计算。

在页面加载到浏览器之前，视口的高度是未知的。所以你不能取那个高度，把它转换成像素，然后用它来计算。

【参考方案3】：

我们使用的 CSS 高度如下所示： 高度：自动|长度|%|初始|继承；

但是，这些中的每一个都应该用 px 等数字表示。每个值的描述如下：

auto:（默认）浏览器计算高度。

length：以px、cm等为单位定义高度

%：定义包含块的高度，以百分比表示。

initial：指定属性的值应该设置为默认值。 inherit：指定属性的值应该从父元素继承。

设置段落的高度和宽度的示例如下：

P 高度：100px; 宽度：100px;