如何基于SASS功能中的屏幕尺寸动态生成

Question

我的目标是根据屏幕尺寸（％）创建动态宽度

如何在SASS中使用JavaScript的screen.width属性？

@function screen-width ($expected, $container) {
  @return ($expected/$container) *100% ;
}
.demo {
  width: screen-width(650px, 1000px);
}

我希望screen-width接受容器宽度，并且应该根据屏幕分辨率动态更改预期宽度。

Answer 1

您无法从CSS中的JavaScript访问对象或变量。 SASS只是一个预处理器，可以在构建时编译为CSS。因此，无法在您的SASS代码中使用screen.width对象上可用的window。

您可以尝试采用其他方法进行尝试：

1）使用media queries

2）如果这确实解决了您的问题，则在window.onload事件中，读取screen.width属性并使用javascript以编程方式设置宽度。

3）如果在调整窗口大小时需要再次设置宽度，请使用onresize事件监听器。