标签：颜色 变量 -- height width color 动态 css

其实有很多种方案，这里主要说两个比较好用的，第一个方案是使用css变量，第二个方案是使用第三方工具less

最新的css支持变量var，并且主流的浏览器基本上都支持这个特性。使用变量我们可以更方便的管理css元素。

定义CSS变量

在css文件顶部定义css变量，注意必须以–开头，使用:root包括这几个变量

:root {
  --main-bg-color: #ff7675;
  --color1: #fbfee9;
  --color2: #5a4446;
  --color3: #8baca1;
  --color4: #ffeec4;
}

使用

在需要的地方使用，使用var()包裹css变量

#secondsLong {
  position: fixed;
  color: var(--color1);
  width: 100%;
  height: 40px;
  font-size: 1.2em;
  bottom: 0;
  background-color: var(--main-bg-color);
}

官方链接地址：https://less.bootcss.com

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

标签：颜色,变量,--,height,width,color,动态,css
来源： https://blog.51cto.com/u_15262460/2883158

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。