我在Razor中有这样一段代码:
if(!string.IsNullOrWhiteSpace(Model.HeroVideoLink))
{
<video preload="muted" autoplay="autoplay" loop="loop" playsinline class="@(Model.DisableVideoFitCover ? "no-display-cover" : "")">
<source src="@Url.ContentUrl(Model.HeroVideoLink)" type="video/mp4">
</video>
}
else
{
<video preload muted autoplay loop playsinline class="@(Model.DisableVideoFitCover ? "no-display-cover" : "")">
<source src="@Url.ContentUrl(Model.HeroVideo)" type="video/mp4">
</video>
}
如果DisableVideoFitCover变量为真,则视频标签应该有一个名为“no-display-cover”的类。否则,它应该是无名的。
我尝试使用SASS应用样式:
video,
picture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
@if $no-display-cover {
object-fit: none;
} @else {
object-fit: cover;
}
pointer-events: none;
font-family: "object-fit: cover;";
}
}
picture {
z-index: 0;
}
video {
z-index: 1;
@if $no-display-cover {
object-fit: none;
} @else {
object-fit: cover;
}
pointer-events: none;
}
}
逻辑应该很简单-如果标签有一个名为“no-display-cover”的类,那么它应该应用属性:
对象适配:无;
如果不是,则它应该具有属性:
对象拟合:封面;
不幸的是,它不起作用,我没有样式。是我的SASS IF语句错了,还是别的什么?
1条答案
按热度按时间xqnpmsa81#
自从我上次使用sass以来已经有很长一段时间了,但是如果我没记错的话,你不能像那样在没有mixin的情况下使用if/else,因为我不太擅长使用mixin,所以我会用初学者的方法来修复它。