css使用变量

最新推荐文章于 2024-04-26 22:14:41 发布

燕京拾亿

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量340

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_59074147/article/details/136909061

版权

vue3单文件SFC新特性在css里可以使用变量，具体使用如下：

<template>
    <div class="home-view">
        <span>测试</span>
        <p>测试2</p>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

let color = 'red';
const color2 = 'blue';
const border = ref('1px solid red');
const state = reactive({
    size: '100px'
})
color = 'pink';
</script>

<style lang="scss" scoped>
.home-view {
    border: v-bind(border);

    span {
        color: v-bind(color);
        font-size: v-bind('state.size');
    }
    p{
        color: v-bind(color2);
        font-size: v-bind('state.size');
    }
}
</style>

效果：