CSS中关于变量的基本教程
CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升防错能力。
示例
- :root {
- --base-font-size: 16px;
- --link-color: #6495ed;
- }
- p {
- font-size: var( --base-font-size );
- }
- a {
- font-size: var( --base-font-size );
- color: var( --link-color );
- }
基础
当使用CSS变量时,你应该了解的三个主要组成:
自定义属性
var()函数
:root伪类
自定义属性
你已经知道了一些CSS的标准属性,如color,margin,width和font-size。
下面的示例使用了CSS的color属性:
- body {
- color: #000000; /* The "color" CSS property */
- }
自定义属性仅意味着我们(创建CSS文件的人)去定义属性的名字。
为了自定义一个属性名,我们需要用--作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性,可以这样做:
- :root {
- --text-color: #000000; /* A custom property named "text-color" */
- }
var()函数
为了应用自定义属性,需要利用var()函数,否则浏览器不知道他们代表什么。
如果想要在p、h1和h2中的样式中使用--text-color,可以这样使用var()函数:
- :root {
- --text-color: #000000;
- }
- p {
- color: var( --text-color );
- font-size: 16px;
- }
- h1 {
- color: var( --text-color );
- font-size: 42px;
- }
- h2 {
- color: var( --text-color );
- font-size: 36px;
- }
其等价于:
- p {
- color: #000000;
- font-size: 16px;
- }
- h1 {
- color: #000000;
- font-size: 42px;
- }
- h2 {
- color: #000000;
- font-size: 36px;
- }
:root伪类
我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性,但到处定义属性并不是一个好主意,这对CSS的可维护性和可阅读性是一个挑战。
:root 伪类代表了HTML文档的根元素,这是一个放置自定义属性的好位置,因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
CSS变量的好处
可维护性
在一个Web开发项目中,我们经常重复使用一个特定的CSS属性值:
- h1 {
- margin-bottom: 20px;
- font-size: 42px;
- line-height: 120%;
- color: gray;
- }
- p {
- margin-bottom: 20px;
- font-size: 18px;
- line-height: 120%;
- color: gray;
- }
- img {
- margin-bottom: 20px;
- border: 1px solid gray;
- }
- .callout {
- margin-bottom: 20px;
- border: 3px solid gray;
- border-radius: 5px;
- }
当需要改变某些属性值时,问题就会暴露出来了。
如果我们手动的改变属性值,尤其是当CSS文件很大时,不仅会花费大量时间,还可能会范一些错误。同样的,如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写:
- :root {
- --base-bottombottom-margin: 20px;
- --base-line-height: 120%;
- --text-color: gray;
- }
- h1 {
- margin-bottom: var( --base-bottombottom-margin );
- font-size: 42px;
- line-height: var( --base-line-height );
- color: var( --text-color );
- }
- p {
- margin-bottom: var( --base-bottombottom-margin );
- font-size: 18px;
- line-height: var( --base-line-height );
- color: var( --text-color );
- }
- img {
- margin-bottom: var( --base-bottombottom-margin );
- border: 1px solid gray;
- }
- .callout {
- margin-bottom: var( --base-bottombottom-margin );
- border: 1px solid gray;
- border-radius: 5px;
- color: var( --text-color );
- }
假设你现在的客户说由于文本颜色太亮,导致文本难以阅读,想要改变文本颜色,此时,我们只需要更新一行CSS规则:
- --text-color: black;
提高CSS的可读性
自定义属性会使样式表更加易读,也会使CSS属性声明更有语义。
将这个声明
- background-color: yellow;
和下面的声明比较一下
- background-color: var( --highlight-color );
- font-size: var( --base-font-size );
像yellow和18px一类的属性值并没有给我们任何有用的上下文信息,但是当我们阅读如--base-font-size和--highlight-color一样的属性名时,即便在其他人的代码,我们都能马上知道这个属性值是在做什么。
要注意的事
大小写敏感
自定义属性是大小写敏感的(和普通的CSS规则不一样)
- :root {
- --main-bg-color: green;
- --MAIN-BG-COLOR: RED;
- }
- .box {
- background-color: var( --main-bg-color ); /* green background */
- }
- .circle {
- BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
- border-radius: 9999em;
- }
- .box,
- .circle {
- height: 100px;
- width: 100px;
- margin-top: 25px;
- box-sizing: padding-box;
- padding-top: 40px;
- text-align: center;
- }
自定义属性值的解析
当重复声明自定义属性时,其赋值遵循通常的CSS层叠和继承规则。例如下面的示例:
HTML
- <body>
- <div class="container">
- <a href="">Link</a>
- </div>
- </body>
CSS
- :root {
- --highlight-color: yellow;
- }
- body {
- --highlight-color: green;
- }
- .container {
- --highlight-color: red;
- }
- a {
- color: var( --highlight-color );
- }
当移除.container规则时,链接的颜色值将是green。
回退值
当使用var()函数时,可以分配一个回退的属性值,其作为一个额外参数和第一个参数用,隔开。看下面的示例:
HTML
- <div class="box">A Box</div>
CSS
- div {
- --container-bg-color: black;
- }
- .box {
- width: 100px;
- height: 100px;
- padding-top: 40px;
- box-sizing: padding-box;
- background-color: var( --container-bf-color, red );
- color: white;
- text-align: center;
- }
因为给var()传递了一个回退值参数,所以div的背景色最中被渲染成红色。
无效值
谨防给CSS属性分配错误类型的值。
在下面的示例中,由于自定义属性--small-button被赋予一个长度单位,它被用在.small-button样式中是无效的(译者注:因为color的属性类型值出错)
- :root {
- --small-button: 200px;
- }
- .small-button {
- color: var(--small-button);
- }
避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width
浏览器对CSS变量的支持
CSS变量用起来很方便,但是浏览器对其支持情况不太好:
相关文章
- CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小,本文主要介绍了css实现电梯导航,具有一定的参考价值,感兴趣的可以了解2023-05-06
- 本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学2023-05-05
- 本文主要介绍了css弧边选项卡的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-05-05
- Css(层叠样式表)是种格式化网页的标准方式,用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术,使用css可以制作各种好看的动画特效,2023-05-04
- CSS的link和@import都是用于引入外部CSS文件的方法,但它们有一些区别和不同的用法,本文通过一个简单的代码演示,展示了link和@import的用法,感兴趣的朋友跟随小编一起看2023-05-04
- 这篇文章主要介绍了使用CSS实现百叶窗效果示例代码,技术上只使用了css+html,还是非常容易学习的,做出来的百叶窗效果也是很丝滑,文中提供了详细的代码,需要的朋友可以参考2023-04-28
- 这篇文章主要介绍了使用CSS实现按钮边缘跑马灯动画,技术上只使用了css+html,还是非常容易学习的,文中提供了详细的代码,需要的朋友可以参考下2023-04-28
- 本文主要介绍了css旋转导航的示例代码,文中通过示例代码介绍的非常详细,该导航可用在一些网站首页导航栏中,需要的朋友们下面随着小编来一起学习学习吧2023-04-27
- 这篇文章将介绍如何使用CSS实现交融文字效果,这是一种独特的标题设计,可以增加页面的视觉吸引力和用户体验。通过使用CSS的letter-spacing属性,我们可以创建出字母之间交2023-04-27
- 在使用弹性布局的时候,必然会有碰到分配子元素空间问题,本文主要介绍了flex子元素内容超出盒子容器宽度问题解决,感兴趣的可以了解一下2023-04-24
最新评论