vue中css變量的使用

<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 代碼。