VueJS中如何在SCSS(Sass)变量中使用v-bind设置半透明颜色

Sass是预编译语言，所有Sass变量、Sass内置函数（包括你调用的rgba()）都会在项目构建阶段被编译成原生CSS，这个阶段组件还未运行，根本拿不到v-bind()绑定的运行时props值。Vue的CSS v-bind()本质是编译为CSS自定义属性（CSS变量），值是运行时才注入的，因此你无法把运行时动态值赋值给编译期的Sass变量，自然也无法用Sass函数处理这类动态值。

方案1：直接使用CSS原生rgba函数（推荐，写法最简洁） #

CSS Color Module Level 4标准中，原生rgba()已经支持直接接收十六进制颜色值作为第一个参数，后续跟透明度值即可，不需要Sass做编译期处理，直接把v-bind写入原生CSS函数参数中即可：

input {
  background: rgba(v-bind(color), 0.5);
}

这个写法在所有支持Vue3 CSS v-bind的现代浏览器中都可正常运行，覆盖95%以上的现有用户场景。如果需要兼容极老旧的浏览器，可以选方案2。

方案2：JS层提前转换颜色值（无兼容性问题） #

如果需要兼容不支持新CSS Color语法的环境，可以在JS逻辑层先把十六进制颜色转换为带透明度的rgba格式字符串，再通过v-bind绑定到样式中，完全不需要依赖Sass函数处理。
首先在组件中加入颜色转换逻辑：

// 十六进制转rgba工具方法
const hexToRgba = (hex, alpha) => {
  // 兼容3位简写十六进制，比如#fff
  const normalizeHex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => r + r + g + g + b + b)
  const colorMatch = normalizeHex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
  return colorMatch
    ? `rgba(${parseInt(colorMatch[1], 16)}, ${parseInt(colorMatch[2], 16)}, ${parseInt(colorMatch[3], 16)}, ${alpha})`
    : hex
}

export default {
  props: {
    color: {
      type: String,
      default: '#195cff'
    }
  },
  computed: {
    inputBg() {
      return hexToRgba(this.color, 0.5)
    }
  }
}

之后在样式中直接绑定处理好的计算属性即可：

input {
  background: v-bind(inputBg);
}

所有Sass的变量赋值、函数调用都属于构建阶段逻辑，只要是需要获取组件运行时的props、data、计算属性等动态值的场景，都不能交给Sass处理：要么用原生CSS能力直接处理运行时生成的CSS变量，要么在JS层把值处理完成后再绑定到样式中。

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