在SCSS中使用JS中的变量

最新推荐文章于 2024-05-13 17:36:02 发布

Icyya_

最新推荐文章于 2024-05-13 17:36:02 发布

阅读量3.4k

点赞数 1

文章标签： javascript scss vue.js

本文链接：https://blog.csdn.net/weixin_57092157/article/details/130237254

版权

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>