如何在SASS中利用JavaScript的screen.width实现屏幕自适应动态百分比宽度

嘿，我来帮你理清这个问题！首先得明确一个关键点：Sass是预处理器，它在编译阶段就会转换成静态CSS，没办法直接访问浏览器运行时的screen.width属性——因为这俩不在同一个工作阶段。不过我们可以通过「CSS变量 + JavaScript」的组合来实现你想要的动态效果，下面给你两种可行的方案：

方案一：直接用JS计算百分比，通过CSS变量传递给Sass #

这种方式更直接，我们用JS监听窗口变化，计算出目标宽度的百分比，然后把值存在CSS变量里，再在Sass中引用这个变量。

1. 添加JavaScript代码（放在HTML里或单独的JS文件） #

// 定义更新宽度变量的函数
function updateDynamicWidth() {
  // 这里更推荐用window.innerWidth（浏览器视口宽度）而非screen.width（屏幕分辨率）
  // 因为响应式布局通常关注的是用户实际看到的视口大小
  const viewportWidth = window.innerWidth;
  // 你的预期宽度，也可以改成动态值
  const expectedWidth = 650;
  // 计算百分比
  const widthPercentage = (expectedWidth / viewportWidth) * 100;
  // 把计算结果存入全局CSS变量
  document.documentElement.style.setProperty('--dynamic-width', `${widthPercentage}%`);
}

// 页面加载时初始化一次
updateDynamicWidth();
// 监听窗口 resize 事件，实时更新
window.addEventListener('resize', updateDynamicWidth);

2. 在Sass中使用这个CSS变量 #

.demo {
  // 引用动态变量，同时设置默认值（防止JS未加载时的 fallback）
  width: var(--dynamic-width, 65%);
}

方案二：保留你的Sass函数，用CSS变量传递参数 #

如果你想继续使用自己写的screen-width函数，可以把函数的参数换成CSS变量，再用JS动态更新这些变量的值。

1. 修改你的Sass函数和样式 #

@function screen-width($expected, $container) {
  @return ($expected / $container) * 100%;
}

.demo {
  // 用CSS变量作为函数参数
  width: screen-width(var(--expected-width), var(--container-width));
  // 同样可以加默认值
  width: calc(screen-width(var(--expected-width, 650px), var(--container-width, 1000px)));
}

2. 添加JavaScript代码 #

function updateWidthParams() {
  const viewportWidth = window.innerWidth;
  // 更新容器宽度变量（这里用视口宽度作为容器宽度，你可以根据需求调整）
  document.documentElement.style.setProperty('--container-width', `${viewportWidth}px`);
  // 更新预期宽度变量，也可以改成动态值
  document.documentElement.style.setProperty('--expected-width', '650px');
}

updateWidthParams();
window.addEventListener('resize', updateWidthParams);

小提醒 #

• 区别screen.width和window.innerWidth：screen.width是整个屏幕的物理分辨率，而window.innerWidth是浏览器当前的视口宽度（包含滚动条），做响应式布局时后者通常更实用。
• 记得给CSS变量设置默认值，这样即使JS加载失败，样式也能有一个基础的 fallback。

内容的提问来源于stack exchange，提问作者Bhutan wangchuk