css 如果在SASS中以类为目标

jv4diomz 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(142)

我在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语句错了，还是别的什么？

css

来源：https://stackoverflow.com/questions/74791234/if-else-targetting-a-class-in-sass

1条答案

按热度按时间

xqnpmsa81#

自从我上次使用sass以来已经有很长一段时间了，但是如果我没记错的话，你不能像那样在没有mixin的情况下使用if/else，因为我不太擅长使用mixin，所以我会用初学者的方法来修复它。

video, picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    img {
        width: 100%;
        height: 100%;
        pointer-events: none;
        font-family: "object-fit: cover;";
        object-fit: cover;
    }
    
    &.no-display-cover {
        img {
            object-fit: none;
        }
    }
}

picture {
    z-index: 0;
}
    
video {
    z-index: 1;
    pointer-events: none;
    object-fit: cover;
    
    &.no-display-cover {
        object-fit: none;
    }
}

赞(0）回复(0）举报 2022-12-15

我来回答

css 如果在SASS中以类为目标

1条答案

相关问题

热门标签

最新问答