CSS自定义属性-入门

简介CSS语言是一种声明式语言，不像其他语言具有变量、条件和逻辑特性，为此，社区中出现了各种CSS处理器语言，如Sass、LESS和Stylus等人。这些处理器语言引入了与其他编程语言类似的特性，例如变量、运算符和逻辑运算。CSS处理器虽然为编写和维护CSS带来了一些便利，但需要额外的编译，因此社区开始将CSS处理器中的变量引入到原生CSS中，最终形成了今天的CSS自定义属性。一、CSS自定义属性简介CSS作者（CSSer）自己定义的属性统称为自定义属性。它允许作者自由选择名称并自由地为名称属性分配任何值。这些属性可以提供给var()函数，var()函数引用的自定义属性通常称为变量。这样，CSSer声明的这些自由属性就有了自定义属性和变量两个名称：自定义属性：使用两行连字符——声明的特殊格式作为名称，名称称为自定义属性，同时,任何值都可以分配给自定义属性。例如--color:#fff。变量：CSS的var()函数引用的自定义属性称为变量。var()将返回自定义属性对应的值，并可以应用于相应的CSS属性。对应CSS规则中的属性值。用一张图来描述它们之间的关系：2.CSS自定义属性的作用当我们项目中的CSS文件很多时，无形中会增加维护成本。即使使用CSS框架，虽然这些框架可能会引入Sass等CSS处理器来帮助我们减少出错几率，提高可维护性，但这种增加额外步骤（需要编译处理）的方法，可能会增加系统的复杂度。CSS自定义属性的出现，给我们带来了一些CSS处理器的便利，不需要额外编译。在CSS中使用CSS自定义属性的好处与在书面语言中使用变量的好处并没有特别的不同。W3C规范中有这样的描述：UsingCSScustompropertiesmakeslargefileseasiertoread，因为看似随意的值都有一个提示名称，编辑这些文件更简单，更不容易出错。因为您只需要在自定义属性处修改一次，所以修改将应用于所有使用自定义属性的地方。此外，CSS自定义属性不仅提供了更灵活的设置、引用和修改方便，而且具有很强的语义（例如，primary这样的名字总是比red这样的名字更有意义）。此语义信息使您的CSS文件可读且易于理解。为此，可读性和可维护性是CSS自定义属性的最大优势。此外，它允许我们在CSS中使用原生变量，而无需借助像Sass这样的CSS处理器。3.浏览器支持CSS自定义属性是CSS的一个重要新特性。到目前为止，所有现代浏览器都对CSS自定义属性有很好的支持，这将使原生CSS变得更加强大。4.CSS自定义属性的语法4.1自定义属性声明CSS自定义属性的用法与常规CSS属性相同。将它们视为动态属性而不是变量。这意味着它们只能在声明块中使用。也就是说，自定义属性和选择器是强绑定的。可以是任何有效的选择器。如果声明的CSS自定义属性未被任何属性调用，则它不会产生任何效果。它只是一个卡在你的样式文件中的字符串。声明自定义属性时，在自定义属性名前加两个连字符（--）。身体{--foo:#7F583F;--bar:#F7EFD2;}CSS自定义属性的命名规则比较宽松，可以是任意有效字符，如中文、大写字母、驼峰命名、中距离线、emoji和HTMLEntities等：自定义属性名称区分大小写，--color和--COLOR是两个不同的自定义属性。4.2var()函数var()函数用于读取自定义属性，并将自定义属性作为var()函数的第一个参数传递。颜色：var（--foo）；text-decoration-color:var(--bar);}var()函数还可以带第二个参数，代表自定义属性的默认值。如果自定义属性不存在，将使用此默认值。颜色：var（--foo，#7F583F）；字体系列：var（--font-stack，“Roboto”，“Helvetica”）；填充：var（--pad，10px15px20px）；做一道题:body{--color:20px;background-color:var(--color,skyblue);}此时的背景色是什么？经过分析，上面的CSS相当于：body{--color:20px;background-color:transparent;}这里需要注意的是，只有在我们使用的自定义属性没有定义的情况下，才会使用后面的值作为元素的属性值。如果自定义属性的值无效，它将被默认值替换。所以的背景色是默认值transparent。var()函数也可用于自定义属性的声明。:root{--primary-color:红色;--logo-text:var(--primary-color);}var()函数可以替换元素上任何属性值的任何部分。但是，var()函数不能用作属性名、选择器或属性值以外的其他值。例如，以下是无效的：.foo{--side:margin-top;/*invalid*/var(--side):20px;}CSS自定义属性不能像Sass计算这样的处理器直接做一些数学运算。如果你需要做一些数值计算，那么使用CSS的calc()函数。/*这是错误的使用方式*/.margin{--space:20px*2;字体大小：var(--空格)；}使用CSS自定义属性进行一些数学计算时，它应该是这样的这是通过calc()函数完成的：.margin{--space:calc(20px*2);字体大小：var(--空格)；}如果使用下面的CSS，中的font-size是多少？身体{--size:20;font-size:var(--size)px;}哈哈哈，一看就知道答案了，font-size的值是20px！构建单个指令时要小心！当您如下所示设置属性值时，20px被解释为单个指令（令牌）。font-size:20px在这里，20px值被视为单个实体。如果您使用以下语法：body{--size:20;font-size:var(--size)px;}浏览器会将其解释为20px。请注意，20和px之间有一个空格。如果必须创建单个指令，请为整个指令使用CSS自定义属性，例如--size:20px或使用calc()函数，例如calc(var(--size)*1px)（当--尺寸设置在20点钟位置）。因此，最稳妥的做法是：body{--size:20px;font-size:var(--size);}或使用CSS3calc()计算：body{--size:20;font-size:calc(var(--size)*1px);}此时的font-size只有20px。4.3CSSCustomPropertyScope在JavaScript中，变量是有作用域的。它们可以是全局范围的或局部范围的。那么，在CSS中，CSS自定义属性也有这种说法。：根{--颜色：黑色；/*全局作用域*/}.block{color:#8cacea;--颜色：蓝色；/*本地范围；`--color`范围是`.block`选项*/}：根选择器可以选择DOM元素或文档树中最高的顶级元素。因此，在:root选择器中声明的CSS自定义属性的作用域是全局作用域，即全局作用域。本地范围是它所在的选择器的有效范围。再来做一道题~

我是什么颜色？