在项目开发中怎么灵活使用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变量这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！