能否在main.css与mobo.css中使用styleguide.css定义的CSS变量？

当然可以，但必须保证styleguide.css的加载顺序早于main.css和mobo.css，具体说明如下：

核心要求：加载顺序 #

在HTML中引入样式文件时，务必将styleguide.css放在最前面，后续再引入main.css和mobo.css。示例代码：

<link rel="stylesheet" href="styleguide.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="mobo.css">

CSS变量是按文件加载顺序解析的，只有先加载定义变量的文件，后续文件才能识别并使用这些变量。

变量作用域的影响 #

• 如果styleguide.css中的变量定义在:root伪类下（全局作用域），比如：

  /* styleguide.css */
  :root {
    --primary-color: #2563eb;
    --text-color: #1f2937;
  }
  

  那么main.css和mobo.css中的任何选择器都可以直接使用这些变量：

  /* main.css */
  .header {
    color: var(--text-color);
    background-color: var(--primary-color);
  }
  

• 如果变量定义在特定选择器下（局部作用域），则只有该选择器及其子元素能在后续文件中使用对应的变量。

注意事项 #

• 若styleguide.css未加载或加载顺序错误，浏览器会将var()视为无效值，若var()设置了 fallback 参数（如var(--primary-color, #ccc)），则会使用 fallback 值；否则该CSS属性会被忽略。
• 变量名区分大小写，比如--Primary-Color和--primary-color是两个不同的变量。

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