如何靈活使用css變量

點(diǎn)擊上方“前端簡報”，選擇“設(shè)為星標(biāo)”

在項(xiàng)目開發(fā)的過程中，有些css樣式我們寫成一樣的，在后期維護(hù)起來特別不方便。舉個栗子：項(xiàng)目主題的背景色和字體色調(diào)是藍(lán)色的，而且項(xiàng)目已經(jīng)到了一個版本在線上運(yùn)行的時候，這個時候產(chǎn)品經(jīng)理過來說我們這個項(xiàng)目下個版本背景和字體顏色要換成淡紫色，最遲明天要部署版本。這個時候就開始打開項(xiàng)目全局搜索有多少個地方涉及到這些屬性，一個一個的拼命改。早知如此何必當(dāng)初，是我的格局小了還是產(chǎn)品經(jīng)理欠揍呢

我們一般可以把公共的樣式作為變量在其他需要的地方，寫上變量名即可，后期維護(hù)起來只需要修改設(shè)置公共變量的value值即可，節(jié)省大量重復(fù)工作，去打打游戲，炒炒股票不香嗎？

在css中我們使用變量一般都是在同類的后綴名文件下使用，舉個栗子：

$bgColor:blue

div{
  background:$bgColor
}

那么如何將css變量在.js,.vue.....文件中使用呢?

$pink: #E65D6E;
$yellow:#FEC171;

:export {
    yellow:$yellow;
    pink:$pink
  }

vue文件中

<template>
  <div :style="custom">測試</div>
</template>
<script>
import variables from '@/assets/style/variables.scss'
export default {
  computed: {
    custom() {
      return {
        color: variables.pink,
        background: variables.yellow
      }
    }
  }
}
</script>
<style scoped >
div{
    width: 300px;
    height: 300px;
    margin: auto;
    text-align: center;
    line-height:300px ;
}
</style>

直接引入variables文件獲取到變量對象即可