sass中如何使用vue的变量，来作为@if的判断条件？

Question

最近需要做一个png和webp格式兼容的功能，对于img标签的使用公用组件方式处理，但是对于每个vue文件中的background: url()也需要做到根据浏览器是否兼容来展示png或是webp的图片。

初步的想法是使用sass的@if功能，判断浏览器是否支持webp，类似这样

判断浏览器是否支持webp的参数在组件渲染前存储到了sessionstorage中，目前想问一下sass中如何使用vue的变量来作为判断的依据？或者有没有其他的好方法。

Answer 1

之前的没考虑到编译时无法访问运行时的 CSS 变量，看下这个应该可以了吧，你把背景图片的 URL 直接设置为 CSS 变量：

<template>
  <div class="image-container"></div>
</template>

<script>
export default {
  mounted() {
    // 从 sessionStorage 中获取 webpSupport 变量
    const webpSupport = sessionStorage.getItem("webpSupport");

    // 设置 CSS 自定义属性
    if (webpSupport === "true") {
      this.$el.style.setProperty("--background-image", "url('path/to/image.webp')");
    } else {
      this.$el.style.setProperty("--background-image", "url('path/to/image.png')");
    }
  },
};
</script>

再把 background-image 属性的值设置为 CSS 变量：

<style lang="scss">
.image-container {
  background-image: var(--background-image);
}
</style>

Answer 2

使用 CSS variable 就行。

SCSS是属于CSS样式预处理器的，是在项目编译前构建成静态的CSS文件的，并不是说你项目打包之后SCSS还是存在于项目中的。类似的 Less、Stylus 也是同理的。

Answer 3

你是在浏览器端使用sass动态渲染样式?

• 如果不是在浏览器端使用sass动态渲染样式
  那你的想法无法实现
• 如果你是在浏览器端使用sass动态渲染样式
  那你调用sass动态渲染的时候,
  最简单的方式就是把一个叫做$webp的变量拼接到你需要动态渲染的sass代码前面
  其他办法,具体见文档sass js-api

Answer 4

postcss有现成的插件，直接拿来用吧
https://github.com/ai/webp-in-css

Answer 5

SCSS也是生成静态的CSS文件啊，怎么可以用到vue里面的变量了...
建议使用直接操作dome，在div判断一下就好了，如果CSS用到的地方多就使用 CSS variable 全局setProperty，之后在引用var(--xxx)