Stylus中使用变量进行计算的问题排查

嘿，我来帮你排查下这个问题！你遇到的变量计算不生效的情况，大概率是几个容易忽略的细节没注意到，咱们一步步来理清楚：

首先，确认变量的正确写法 #

Stylus对变量语法兼容很灵活，但有两种更稳妥的写法可以避免计算问题：

写法1：变量存纯数值，计算后加单位 #

// 全局或当前作用域内定义变量
$siteWidth = 1200

// 使用时包裹计算表达式再加单位
.header
  margin-right: ($siteWidth / 2)px

这样编译后会得到 margin-right: 600px;，和你直接写(1200/2)px的效果一致。

写法2：变量自带单位，直接计算 #

$siteWidth = 1200px

.header
  margin-right: $siteWidth / 2

这种写法更简洁，Stylus会自动处理单位运算，结果同样是600px。

最容易踩坑的点：变量作用域 #

如果你把变量定义在了某个选择器内部，那它只能在这个选择器（或其子选择器）里使用，外部是访问不到的！比如下面这种写法就会失效：

// 错误示例：变量在选择器内，外部无法调用
.header
  $siteWidth = 1200

.footer
  margin-right: ($siteWidth / 2)px // 这里会找不到$siteWidth变量！

解决办法是把变量移到全局（所有选择器外面）或者你需要使用它的父级作用域里。

关于calc()中使用变量的情况 #

如果你是在CSS的calc()函数里用变量，注意Stylus的插值规则：

• 新版本Stylus可以直接写：

  $siteWidth = 1200px
  margin-right: calc(100% - $siteWidth / 2)
  

• 旧版本可能需要用{}包裹变量来强制插值：

  margin-right: calc(100% - {$siteWidth} / 2)
  

最后排查编译环境 #

如果上面的写法都试过还是不行，建议你写一个极简的测试文件（比如只包含变量和一个选择器），用Stylus命令行手动编译测试：

stylus test.styl -o test.css

看看生成的CSS文件里有没有正确输出计算后的数值。如果命令行编译正常，那可能是你项目里的预处理器配置有问题（比如Webpack/Vite的Stylus loader配置错误）。

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