vue中css变量的使用
<template><div class="test"><span :style="spanStyle" class="span1">hello world</span><br><span :style="{'--width': widthVar}" class="s...
·
<template>
<div class="test">
<span :style="spanStyle" class="span1">hello world</span>
<br>
<span :style="{'--width': widthVar}" class="span2">hello earth</span>
</div>
</template>
<script>
export default {
data() {
return {
spanStyle: {
"--color": "red"
},
widthVar: "100px"
};
}
}
</script>
<style scoped>
.span1 {
color: var(--color);
}
.span2 {
text-align: center;
position: relative;
width: var(--width);
}
.span2::after {
content: '';
display: block;
position: absolute;
left: 100%;
width: var(--width);
height: var(--width);
border-radius: 50%;
border: 2px solid black;
}
</style>
但相信大多数人写 Vue 用的都是 CSS 预处理器,这里也给出使用预处理器使用这种方案的方法(我这里给出 Sass 的用法,Stylus,Less与之类似)
<style scoped lang="sass">
// 只在使用 CSS 变量的时候和前面略有不同
.span2
width: #{'var(--width)'}
</style>
这里的#{'var(--width)'}
是 Sass 里的插值,类似于 js 里的${}
。官方的解释用法见下图。
意思就是这样插入一个字符串,在把 Sass 编译成 CSS 后会完整地保留引号之内的内容(既然 Sass 不能直接使用 CSS 变量,那就编译后使用嘛)。其它的预处理器应该都有类似的插值语法,大家在官方文档里搜索关键词 interpolation
或者quoted string
应该就可以查到了。
总结
将二者相辅相成并且结合 Vue 原有的:class
和:style
,相信大家能写出更优雅的 Vue 代码。
更多推荐
已为社区贡献4条内容
所有评论(0)