如何利用SCSS的@if指令判断当前环境并输出不同的CSS样式？-css教程-PHP中文网

scss 的 @if 仅在编译时根据预注入变量静态判断，无法感知运行时环境；需通过构建工具（如 webpack/vite）提前注入 $env 值，否则报错；字符串比较须加引号，布尔判断注意真值规则，多条件需括号，调试用 @debug，真正环境区分靠构建输出多套css或js运行时切换class。

如何利用scss的@if指令判断当前环境并输出不同的css样式？

SCSS 的 @if 指令无法“判断当前环境”，它只在编译时根据你提前注入的变量值决定输出哪部分 CSS —— 浏览器运行时、用户操作、CSS 变量、prefers-color-scheme 都不影响它。

你写的这行代码本身不读取任何运行时环境信息。它生效的前提是：$env 这个 Sass 变量必须在编译前就被明确赋值，比如：

Webpack 用 DefinePlugin 注入：把 process.env.NODE_ENV 映射为 Sass 变量 $env: "production"
Vite 通过 define 配置 + sass 选项传入：css: { preprocessorOptions: { sass: { additionalData: '$env: "' + process.env.MODE + '";' } } }
构建脚本手动替换：用 sed 或 cross-env 在打包前写死 _env.scss 文件内容

如果没做这些，$env 就是未定义变量，Sass 编译直接报错 Undefined variable "$env"。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

即使变量已注入，类型和语法错误也会让分支失效：

@if $env == "production" ✅（字符串必须加双引号）；@if $env == production ❌（会被解析为变量名 $production）
@if $debug ✅ 当 $debug: true；但 @if $debug 对 $debug: false 或 $debug: null 才为假 —— 注意 0、""、() 全部算真值
多条件必须加括号：@if ($env == "production") and ($theme == "dark")，漏括号会导致逻辑错乱
调试时加一行 @debug $env;，确认值和类型是否符合预期

别指望 @if 自动感知环境，它只是个静态开关：

构建时差异化输出：用不同命令跑两次编译，例如 sass --define=env=production main.scss:dist/main.prod.css 和 --define=env=development，生成两套独立 CSS 文件
运行时切换靠 JS + class：Sass 里预编译好 .theme-dark {} 和 .theme-light {}，JS 根据 localStorage 或 matchMedia 切换 document.documentElement.className