腾讯ISUX: 面向未来的 CSS Variable (CSS变量)

2024-01-19 00:58

本文主要是介绍腾讯ISUX: 面向未来的 CSS Variable (CSS变量),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转载自: 腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

CSS Variable 即CSS变量,聊CSS变量之前,我想先来说说Sass和Less,还有Stylus,它们都是目前使用较为普遍的三款CSS预处理框架,我们为什么要使用它们呢,因为它们都可以让你在CSS中方便的使用变量、简单的程序逻辑、函数等在编程时使用的一些基本技巧,这些框架对于这种CSS预处理的技术已经非常成熟,可以让你的CSS代码变的更加简洁、便于维护、在编写的时候也无需考虑代码的兼容性。

三大编译语言的方法

首先他们不约而同的都将自己的名称做为编译文件的后缀名,分别是:

这里写图片描述

由于Sass和Less都使用的是标准的CSS语法,和Stylus有所不同,它们分别支持以下几种语法:

这里写图片描述

它们的变量使用方法也有不太一样的地方:

这里写图片描述

以上三种框架编译后的写法,都会得到以下相同的样式:

这里写图片描述

其次就是嵌套方式,有时候我们的类名会引入非常多的父级元素,这样冗余的代码,不仅没有提升可读性,而且增加代码的体积

这里写图片描述

如果使用CSS预处理,就可以少些重复的类名,代码结构层次清晰,显得会比较优雅:

这里写图片描述

css变量的方法

那么CSS变量这边的情况又是如何?关于变量,其实不外乎定义和使用,我们可以通过这样一个简单的例子来了解,例如下图, 这里定义了三个变量,title、link、text,变量的应用范围是整个document

这里写图片描述

当然CSS变量也是有应用范围的,这就是说,你可以覆盖它们,因为变量的声明和使用遵循了CSS的层叠特性,类似于普通编程语言中的变量作用域:

这里写图片描述

这样定义后,p就变成另外一种颜色(黑色)
CSS变量还可以赋予任何值,例如,你可以把它们放到calc()计算表达式里。这样可以在不同的情况下对CSS变量重新赋值,比如,在不同的media query里赋不同的值。下面是一些使用场景的例子:

这里写图片描述

根据上面的CSS定义,当浏览器窗口小于等于640px时,media query就会发生作用,里面的CSS变量值发生变化。

CSS变量的用途

在我们构建站点的时候,通常为了站点的可维护性,例如使用换肤,或者某一种配色方案,当中的文字颜色、字体大小、背景色等等会在页面中多次出现,并被重复使用,当你需要修改的时候,不论是调整配色还是文字大小,都可以通过之前设置好的CSS变量来直接修改。

那么为什么我要使用CSS变量呢

相较于传统的Sass、Less、Stylus等预处理变量,CSS变量有它的优势:

1.CSS变量直接修改,立即生效,而传统与处理器变量编译后无法直接更改

2.CSS变量能够像CSS本身一样,能够继承,能够组合使用,可以作用需要的地方即作用域

3.配合上JS,可以方便的读写和控制

4.语法上类似CSS和JS,方便快速上手开发,不需要像其它传统预处理变量那样,需要学习各种语法,开发和交接成本低

5.CSS变量本身包换了语义的信息,在CSS文件中能够被识别和理解。

6.当多个媒介查询的时候,重复定义的代码量会成倍增加。因为CSS变量可以传递,当我们使用响应式的时候,我们只需要修改一个CSS属性值即可。下图中我们只需要修改–columns这一个变量即可。

这里写图片描述

css变量支持的情况

下面是目前浏览器支持的情况,虽然IE依旧不能够支持,但是如果是在移动端,还是可以来尝试一下的,当然如果有兴趣的可以关注一下:cssnext,myth这个两个插件,可以让我们提前使用CSS变量的一些方法:

这里写图片描述

总结

总的来说,CSS变量还是能够针对性的解决一些项目中的实际问题:

比如一个站点的配色,如果只是几个常用的颜色被应用到多个地方,我们完全可以通过CSS变量来轻松修改,并不需要用到Less、Sass、Stylus这样”复杂”的编译系统。

在响应式代码中不需要重复声明变量,在Less和Sass中也没办法做到像CSS变量那样简洁优雅的代码。

最后,写这篇文章并不是想说CSS变量要取代谁和谁,而是,我们在开发过程中,应该思考自己需要通过工具解决某个实际存存在的问题!

这篇关于腾讯ISUX: 面向未来的 CSS Variable (CSS变量)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/620808

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...