1.在js中定义变量:
<script setup>
import {computed, ref} from "vue";
const fileWidth = ref(150);
const cssVars = computed(() => {
return (fileWidth.value - 10) + 'px'
});
</script>
2.在SCSS中使用js中的变量:
//直接使用
<style lang="scss" scoped>
.pendingImg {
width: v-bind(cssVars);
}
</style>
//在scss中定义变量后再使用
<style lang="scss" scoped>
$baseWidth: v-bind(cssVars);
.pendingImg {
width: $baseWidth;
}
</style>