总结一下CSS中变量的应用场景

·  阅读 1807
 总结一下CSS中变量的应用场景

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

前言

从写下第一篇关于CSS变量的文章《CSS中的变量 》,我就爱上了使用这个小东西(呆在一家不需要考虑浏览器兼容性的公司真舒服啊),后来,我又去学习CSS的进阶知识,学会了如何给一个CSS变量,定义属性和默认值-《带有类型和默认值的CSS变量》。在项目中,我已经开始CSS变量,当然使用SCSS/LESS的项目除外。在日常的使用中,我总结了几个使用CSS变量的极佳场景,本文记录总结一下。

颜色/字体/尺寸的统一

这个无论是CSS变量,还是SCSS变量都是使用最多的场景,日常的开发,设计师通常会给我们一份,样式统一的UI设计。整个网页类似颜色和字体必定是统一的,当然这种由设计稿的项目,即使不使用变量也很容易统一。但是对于独立开发者,制作一个项目,就很容易忽略整体样式的统一。例如RGB颜色值,在开发的过程中,手打肯定是不显示的,肯定是需要复制的,但是你用上了CSS变量,就只需要记住对应的变量名。

:root {  --bk-color: red}
复制代码

重复值

在日常的开发中,编写的CSS的很多都是会一致的,例如我经常写的一行代码。对于这行种代码,我需要在很多地方用到。此时我就会有两个解决方案。1. 把这行代码放在一个单独的class中。2. 把这行代码定义为变量。

border:solid 1px #ddd;
复制代码
:root {  --bd:border:solid 1px #ddd;}
复制代码

相信需要考虑兼容性的童鞋,因为浏览器厂商前缀的存在,可能一个CSS属性,可能就要写好几遍,一些简单的代码,还可以接受,但是类似linear-gradient(),这种属性值,复杂的话可能有几百个字符。下面是我随手百度到的渐变,此时我们就应该是将这个渐变,定义为一个变量。

 linear-gradient(45deg,transparent 50%, white 50%),linear-gradient(135deg, white 50%,rgba(0, 0, 0, 0.774) 62%,white 62%,white 69%,rgba(255, 166, 0) 69%,rgba(182, 25, 51) 81%,#fff 81%,#fff 88%,rgb(89, 176, 247) 88%,rgb(170, 12, 190) 100%);

复制代码

浏览器厂商前缀

  • -webkit- Chrome 苹果浏览器

  • -moz- 火狐浏览器

  • -ms- IE系列浏览器

  • -o- 欧朋

响应式布局

对于这种用法,我也是在看了大佬的代码之后,才学会的。例如:我本人在项目中,布局的话,最近用的比较多的就是grid布局了。假设我们在PC端有8列,但是移动端就是4个。此时我们通常的做法是媒体查询中定义 grid-template-column。在此基础上,用上CSS变量就更简单:

:root {
  --clm: 8;
}

@media (max-width: 375px) {
  :root {
    --clm: 4;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--clm), 1fr);
}
复制代码

配合JS

因为CSSStyleDeclaration.setProperty()的存在,我们可以很方便的操作CSS变量,例如我之前写的《巧用CSS变量实现渐变跟随鼠标》,巧妙地操作了,渐变的位置。

后记

人呐,学东西还是要成体系的。零零散散的大抵还是不行的。此文仅总结我对CSS变量,学到的一些知识。日后若是有新用法新场景,也会整理进来!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改