在項目開發(fā)中怎么靈活使用css變量

這篇文章主要講解了“在項目開發(fā)中怎么靈活使用css變量”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“在項目開發(fā)中怎么靈活使用css變量”吧！

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

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

在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文件獲取到變量對象即可

感謝各位的閱讀，以上就是“在項目開發(fā)中怎么靈活使用css變量”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對在項目開發(fā)中怎么靈活使用css變量這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！