在項目開發中怎么靈活使用css變量

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

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

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

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

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