CSS中变量的基本教程详解.docx

CSS中变量的基本教程详解CSS中关于变量的基本教程详解CSS中的变量给了我们诸多优点：方便、代码重用、更可靠的代码库和提升防错能力。示例CSSCode复制内容到剪贴板: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属性：CSSCode复制内容到剪贴板body{color:#000000;/*The"color"CSSproperty*/}自定义属性仅意味着我们（创建CSS文件的人）去定义属性的名字。为了自定义一个属性名，我们需要用--作为前缀。如果我们要创建一个值为黑色的、名为text-color的自定义属性，可以这样做：CSSCode复制内容到剪贴板:root{--text-color:#000000;/*Acustompropertynamed"text-color"*/}var()函数为了应用自定义属性，需要利用var()函数，否则浏览器不知道他们代表什么。如果想要在p、h1和h2中的样式中使用--text-color，可以这样使用var()函数：CSSCode复制内容到剪贴板: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;}其等价于：CSSCode复制内容到剪贴板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属性值：CSSCode复制内容到剪贴板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:1pxsolidgray;}.callout{margin-bottom:20px;border:3pxsolidgray;border-radius:5px;}当需要改变某些属性值时，问题就会暴露出来了。如果我们手动的`改变属性值，尤其是当CSS文件很大时，不仅会花费大量时间，还可能会范一些错误。同样的，如果我们执行一个批处理查找和替换,就可能会无意中影响其他样式规则。我们可以使用CSS变量重写：CSSCode复制内容到剪贴板: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:1pxsolidgray;}.callout{margin-bottom:var(--base-bottombottom-margin);borde