脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS中关于变量的基本教程

淡忘~浅思   发布时间：2015-08-03 17:37:15   作者：dwqs   我要评论
这篇文章主要介绍了CSS中关于变量的基本教程,是CSS入门学习中的基础知识,需要的朋友可以参考下

CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。
示例

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --base-font-size: 16px;   
  3.   --link-color: #6495ed;   
  4. }   
  5. p {   
  6.   font-size: var( --base-font-size );   
  7. }   
  8. a {   
  9.   font-size: var( --base-font-size );   
  10.   color: var( --link-color );   
  11. }  

基础

当使用CSS变量时，你应该了解的三个主要组成：

    自定义属性
    var()函数
    :root伪类

自定义属性

你已经知道了一些CSS的标准属性，如color,margin,width和font-size。
下面的示例使用了CSS的color属性：

CSS Code复制内容到剪贴板
  1. body {   
  2.   color: #000000; /* The "color" CSS property */  
  3. }  

自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。
为了自定义一个属性名，我们需要用--作为前缀。
如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --text-color: #000000; /* A custom property named "text-color" */  
  3. }  

var()函数

为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。
如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --text-color: #000000;   
  3. }   
  4. p {   
  5.   color: var( --text-color );   
  6.   font-size: 16px;   
  7. }   
  8. h1 {   
  9.   color: var( --text-color );   
  10.   font-size: 42px;   
  11. }   
  12. h2 {   
  13.   color: var( --text-color );   
  14.   font-size: 36px;   
  15. }  

其等价于：

CSS Code复制内容到剪贴板
  1. p {   
  2.   color: #000000;   
  3.   font-size: 16px;   
  4. }   
  5. h1 {   
  6.   color: #000000;   
  7.   font-size: 42px;   
  8. }   
  9. h2 {   
  10.   color: #000000;   
  11.   font-size: 36px;   
  12. }  

:root伪类

我们需要一个地方来放置自定义属性。虽然可以在任何样式规则中指定自定义属性，但到处定义属性并不是一个好主意，这对CSS的可维护性和可阅读性是一个挑战。

:root 伪类代表了HTML文档的根元素，这是一个放置自定义属性的好位置，因为我们可以通过其他更具特异性的选择器来覆盖自定义属性值。
CSS变量的好处
可维护性

在一个Web开发项目中，我们经常重复使用一个特定的CSS属性值：

CSS Code复制内容到剪贴板
  1. h1 {   
  2.   margin-bottom: 20px;   
  3.   font-size: 42px;   
  4.   line-height: 120%;   
  5.   color: gray;   
  6. }   
  7. p {   
  8.   margin-bottom: 20px;   
  9.   font-size: 18px;   
  10.   line-height: 120%;   
  11.   color: gray;   
  12. }   
  13. img {   
  14.   margin-bottom: 20px;   
  15.   border: 1px solid gray;   
  16. }   
  17. .callout {   
  18.   margin-bottom: 20px;   
  19.   border: 3px solid gray;   
  20.   border-radius: 5px;   
  21. }  

当需要改变某些属性值时，问题就会暴露出来了。
如果我们手动的改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。
我们可以使用CSS变量重写：

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --base-bottombottom-margin: 20px;   
  3.   --base-line-height:   120%;   
  4.   --text-color:         gray;   
  5. }   
  6. h1 {   
  7.   margin-bottom: var( --base-bottombottom-margin );   
  8.   font-size: 42px;   
  9.   line-height: var( --base-line-height );   
  10.   color: var( --text-color );   
  11. }   
  12. p {   
  13.   margin-bottom: var( --base-bottombottom-margin );   
  14.   font-size: 18px;   
  15.   line-height: var( --base-line-height );   
  16.   color: var( --text-color );   
  17. }   
  18. img {   
  19.   margin-bottom: var( --base-bottombottom-margin );   
  20.   border: 1px solid gray;   
  21. }   
  22. .callout {   
  23.   margin-bottom: var( --base-bottombottom-margin );   
  24.   border: 1px solid gray;   
  25.   border-radius: 5px;   
  26.   color: var( --text-color );   
  27. }  

假设你现在的客户说由于文本颜色太亮，导致文本难以阅读，想要改变文本颜色，此时，我们只需要更新一行CSS规则：

CSS Code复制内容到剪贴板
  1. --text-color: black;  

提高CSS的可读性

自定义属性会使样式表更加易读，也会使CSS属性声明更有语义。
将这个声明

CSS Code复制内容到剪贴板
  1. background-color: yellow;  

和下面的声明比较一下

CSS Code复制内容到剪贴板
  1. background-color: var( --highlight-color );   
  2. font-size: var( --base-font-size );  

像yellow和18px一类的属性值并没有给我们任何有用的上下文信息，但是当我们阅读如--base-font-size和--highlight-color一样的属性名时，即便在其他人的代码，我们都能马上知道这个属性值是在做什么。
要注意的事
大小写敏感

自定义属性是大小写敏感的（和普通的CSS规则不一样）

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --main-bg-color: green;   
  3.   --MAIN-BG-COLOR: RED;   
  4. }   
  5. .box {   
  6.   background-color: var( --main-bg-color ); /* green background */  
  7. }   
  8. .circle {   
  9.   BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */  
  10.   border-radius: 9999em;   
  11. }   
  12. .box,   
  13. .circle {   
  14.   height: 100px;   
  15.   width: 100px;   
  16.   margin-top: 25px;   
  17.   box-sizing: padding-box;   
  18.   padding-top: 40px;   
  19.   text-align: center;   
  20. }  

自定义属性值的解析

当重复声明自定义属性时，其赋值遵循通常的CSS层叠和继承规则。例如下面的示例：
HTML

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.   <div class="container">  
  3.     <a href="">Link</a>  
  4.   </div>  
  5. </body>  

CSS

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --highlight-color: yellow;   
  3. }   
  4. body {   
  5.   --highlight-color: green;   
  6. }   
  7. .container {   
  8.   --highlight-color: red;   
  9. }   
  10. a {   
  11.   color: var( --highlight-color );   
  12. }  

当移除.container规则时，链接的颜色值将是green。
回退值

当使用var()函数时，可以分配一个回退的属性值，其作为一个额外参数和第一个参数用,隔开。看下面的示例：
HTML

XML/HTML Code复制内容到剪贴板
  1. <div class="box">A Box</div>  

CSS

CSS Code复制内容到剪贴板
  1. div {   
  2.   --container-bg-color: black;   
  3. }   
  4. .box {   
  5.   width: 100px;   
  6.   height: 100px;   
  7.   padding-top: 40px;   
  8.   box-sizing: padding-box;   
  9.   background-color: var( --container-bf-color, red );   
  10.   color: white;   
  11.   text-align: center;   
  12. }  

因为给var()传递了一个回退值参数，所以div的背景色最中被渲染成红色。
无效值

谨防给CSS属性分配错误类型的值。
在下面的示例中，由于自定义属性--small-button被赋予一个长度单位，它被用在.small-button样式中是无效的(译者注：因为color的属性类型值出错)

CSS Code复制内容到剪贴板
  1. :root {   
  2.   --small-button: 200px;   
  3. }   
  4. .small-button {   
  5.  color: var(--small-button);   
  6. }  

避免这种情况的一个好方式是想出具有描述性的自定义属性名称。例如将上面的自定义属性命名为--small-button-width
浏览器对CSS变量的支持

CSS变量用起来很方便，但是浏览器对其支持情况不太好：
201583174022299.png (1228×470)

相关文章

  • 前端CSS Grid 布局示例详解

    CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,这篇文章主要介绍了前端CSS Grid 布局详解,需要的朋
    2025-04-16

  • CSS Padding 和 Margin 区别全解析

    CSS 中的 padding 和 margin 是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍 padding 和 margin 的概念、区别以及如何在实际项目中使用它们
    2025-04-07

  • CSS will-change 属性示例详解

    will-change 是一个 CSS 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSS will-change 属性详解，感兴趣的朋友一起看看吧
    2025-04-07

  • CSS去除a标签的下划线的几种方法

    本文给大家分享在 CSS 中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧
    2025-04-07

  • 前端高级CSS用法示例详解

    在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将
    2025-04-07

  • css中的 vertical-align与line-height作用详解

    文章详细介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，感兴趣的朋友跟随小编一起看看吧
    2025-03-26

  • 浅析CSS 中z - index属性的作用及在什么情况下会失效

    z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fixed或sticky），本文给大家介绍CSS 中z - index属性的作用
    2025-03-21

  • CSS @media print 使用详解

    文章详细介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等
    2025-03-18

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

    本文介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示，感兴趣的朋友一起
    2025-03-10

  • 前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

    本文介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式；通过数组语法,可以同时绑定多个类名或样式,此外
    2025-02-26

最新评论

关注微信公众号

扫一扫