能否仅用Sass实现多语言背景图URL切换？是否需用JQuery？

我想根据用户的浏览器语言，修改页面中#mockUp容器的背景图URL——比如浏览器语言是西班牙语时，路径改成../../assets/images/mock-ups/minimalist-profile-es.png。目前我有以下Sass代码和JS工具函数，想问问只靠Sass能不能实现？还是得用jQuery？

现有Sass代码 #

div#mockUp {
  @include fancy-container(
    $background-image:
      url("../../assets/images/mock-ups/minimalist-profile-en.png"),
    $height: auto,
    $min-height: 95vh
  );
}

现有JS工具函数 #

/**
 * Gets the device's browser language.
 *
 * @memberof module:i18n/Functions
 * @function getNavigatorLanguage
 * @returns {string | undefined} The language of the browser
 */
export default () => navigator.language ?? navigator.userLanguage;

回答 #

结论：仅用Sass无法实现 #

Sass是预处理器，所有逻辑在编译阶段就已完成，无法获取浏览器运行时的用户语言这类动态信息，它只能生成静态CSS代码，所以没法单独完成这个需求。

推荐方案：用原生JS实现（无需jQuery） #

你现有的getNavigatorLanguage函数已经能获取浏览器语言，在此基础上直接用原生JS修改元素样式即可，无需引入jQuery，更轻量高效：

// 导入你的语言获取函数
import getNavigatorLanguage from './path-to-your-function';

function updateMockUpBackground() {
  const mockUpElement = document.getElementById('mockUp');
  if (!mockUpElement) return;

  // 提取语言前缀（如"es-ES"取"es"，默认 fallback 为英文）
  const languagePrefix = getNavigatorLanguage()?.split('-')[0] || 'en';
  // 拼接对应语言的背景图URL
  const backgroundUrl = `../../assets/images/mock-ups/minimalist-profile-${languagePrefix}.png`;
  
  // 给元素设置背景图
  mockUpElement.style.backgroundImage = `url(${backgroundUrl})`;
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', updateMockUpBackground);

若一定要用jQuery（不推荐） #

如果项目已经引入jQuery，逻辑和原生JS一致，只是选择元素和设置样式的语法不同：

import getNavigatorLanguage from './path-to-your-function';

$(document).ready(function() {
  const languagePrefix = getNavigatorLanguage()?.split('-')[0] || 'en';
  const backgroundUrl = `../../assets/images/mock-ups/minimalist-profile-${languagePrefix}.png`;
  $('#mockUp').css('background-image', `url(${backgroundUrl})`);
});

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