如何在JavaScript文件中访问CSS文件内定义的自定义变量？

嘿，这个问题我之前做项目的时候刚好碰到过，得先分两种情况来给你讲清楚——毕竟你提到的@变量可能是Less/Sass这类预处理器的变量，也有可能是你混淆了原生CSS自定义属性的写法：

情况1：你用的是Less/Sass这类预处理器的@变量 #

这类预处理器变量是在编译阶段就被替换成具体CSS值的，编译后的普通CSS文件里根本找不到这些@变量的痕迹，所以没法直接从JS里读取。不过有两个靠谱的解决办法：

方法1：把预处理器变量导出为JS可访问的模块 #

以Less为例，你可以在样式文件里用:export关键字把变量暴露出去：

// 你的Less文件，比如styles.less
@red: #ff0000;
@yellow: #ffff00;

// 导出变量到JS模块
:export {
  redColor: @red;
  yellowColor: @yellow;
}

然后在JS文件里直接导入这个样式模块就能拿到变量值了：

import styles from './styles.less';

console.log(styles.redColor); // 输出 #ff0000
console.log(styles.yellowColor); // 输出 #ffff00

这个方法需要你用Webpack这类模块打包工具来处理CSS模块哦。

方法2：让JS和预处理器共享同一个变量源 #

你可以把变量定义在JS文件里，然后让预处理器去读取这个文件的内容，这样两边用的是同一个值，不会出现不一致的情况：
先创建一个color-vars.js：

export const colorVars = {
  red: '#ff0000',
  yellow: '#ffff00'
};

然后在Less文件里导入这个JS变量（需要Less支持JS导入，或者配合Webpack的loader）：

@red: ~`import('./color-vars.js').colorVars.red`;
@yellow: ~`import('./color-vars.js').colorVars.yellow`;

之后JS里直接用colorVars.red就能拿到对应的值啦。

情况2：你用的是原生CSS自定义属性（可能你误写成了@开头） #

如果你其实是想用原生CSS的自定义属性（标准写法是用--开头），那直接在JS里读取就很简单了：
首先在CSS里定义变量（一般放在:root下全局可用）：

:root {
  --red: #ff0000;
  --yellow: #ffff00;
}

然后在JS里通过getComputedStyle来获取变量值：

// 获取根元素的计算样式
const rootStyles = getComputedStyle(document.documentElement);

// 读取变量，记得用trim()去掉多余的空格
const redColor = rootStyles.getPropertyValue('--red').trim();
const yellowColor = rootStyles.getPropertyValue('--yellow').trim();

console.log(redColor); // 输出 #ff0000

要是你想修改这个变量的值，还可以用setProperty：

document.documentElement.style.setProperty('--red', '#ff4444');

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