Razor动态添加类后，SASS条件判断控制视频样式失效排查

你的问题不是SASS的@if语法错误，而是思路方向错了——SASS变量是编译时的静态值，没法对应HTML里根据Model动态添加的类，所以用@if判断SASS变量的方式根本没法触发动态样式变化。

为什么原来的写法无效？ #

你可能写了类似这样的SASS代码：

$no-display-cover: false; // 静态变量，编译时就固定了
video {
  @if $no-display-cover {
    object-fit: none;
  } @else {
    object-fit: cover;
  }
}

这种代码编译后只会输出一种固定的object-fit样式，不管HTML里的video标签有没有no-display-cover类，样式都不会变，完全起不到动态切换的作用。

正确的SASS写法 #

应该用CSS类选择器的优先级覆盖来实现，这才是对应HTML动态类的正确方式：

// 默认样式：没有no-display-cover类时应用
video {
  object-fit: cover;
}

// 带类时覆盖默认样式
video.no-display-cover {
  object-fit: none;
}

这样不管Razor里动态给video加不加类，只要类名正确，样式就会自动切换。

顺便检查Razor代码的正确性 #

确保你在Razor里正确输出了类名，比如可以这样写（更简洁的方式）：

<video 
  class="@(Model.DisableVideoFitCover ? "no-display-cover" : "")"
  src="@(string.IsNullOrEmpty(Model.HeroVideoLink) ? "/默认视频地址.mp4" : Model.HeroVideoLink)"
></video>

注意类名拼写要和SASS里的选择器完全一致（大小写、连字符都不能错）。

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