如何在css中自定义属性

　　介绍

本篇文章给大家分享的是有关如何在css中自定义属性,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强> 1 * css变量的语法

<强> & lt; 1比;什么是css变量?

如果您使用过任何一种编程语言,那么您应该已经熟悉了变量的概念。变量允许您存储和更新程序所需的值以便工作。

在css中使用变量的好处与在编程语言中使用变量的好处并没有太大的不同。

以下是规范对此的说法:

(使用css变量)使它易于读取大文件,现在看起来很随意的值的名称,并使编辑这些文件更容易和更少出错,as> .box { 　　,,——box-color: # 4 d4e53; 　　,,——box-padding: 0, 10 px; 　　}

属性的值可以是任何有效的CSS值:颜色,字符串,布局值,甚至是表达式。

以下是一些有用的自定义属性:

:根{ 　　,,,主色调:# 4 d4e53; 　　,,——main-bg: rgb (255,, 255,, 255); 　　,,——logo-border-color: rebeccapurple; 　　,,——header-height: 68 px; 　　,,——content-padding: 10 px  20 px; 　　,,——base-line-height: 1.428571429; 　　,,——transition-duration: .35点; 　　——外部链接:,才能“external  link"; 　　——margin-top:才能,calc(时间+ 2 vh  20 px);/*,才能Valid  CSS  custom  properties 还要be  reused  later ,,说,JavaScript只*/,,——foo:如果(祝辞x  5), this.width =, 10; 　　}

如果您不确定:根,在HTML中它与HTML相同但具有更高的特异性,相当于全局变量。

<强> & lt; 3比;css变量的使用

<强> var()函数

您要通过var()这个css函数来使用css变量,将css变量名传入这个函数:

.box { 　　——才能box-color: # 4 d4e53; 　　,,——box-padding: 0, 10 px; 　　 　　,,填充:var (——box-padding); 　　} 　　 　　.box  div { 　　,,颜色:var (——box-color); 　　}

<>强var()函数的语法是:
,

var (, & lt; custom-property-name>, [, & lt; declaration-value>,] ?,)

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效,则该函数将使用第二个值。

如果您不确定是否已定义自定义属性并且想要提供用作回退的值,则可以执行此操作。

例如:

颜色:var (foo,红、蓝);//将红、蓝同时指定为回退值,即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

<代码>填充:var (box-padding, var (——main-padding));

<强>钙()函数

由于我们习惯使用预处理器和其他语言,我们希望在处理变量时能够使用基本运算符。为此,CSS提供了一个钙()函数,它使浏览器在对自定义属性的值进行任何更改后重新计算表达式:

:根{ 　　,,——indent-size: 10 px; 　　 　　,,——indent-xl:钙(2 * var (——indent-size)); 　　——indent-l:才能,calc (var (——indent-size), +, 2 px); 　　——indent-s:才能,calc (var (——indent-size),安康;2 px); 　　——indent-xs:才能,calc (var (——indent-size)/2); 　　}

如果您尝试使用无单位值,则使用钙()函数可以带来很大的方便:

:根{ 　　,,——间隔:10; 　　} 　　.box { 　　,,填充:var(——垫片)px  0;,/*,并# 39;T  work  */填充:才能,calc (var(间隔)* 1 px), 0;,/*情况,*/}

<>强css自定义属性的吟游诗人

自定义属性也遵守css层叠规则。
,

<强> 2 *利用js使用css自定义属性

假设您有一个名为——left-pos的css变量,其值为100 px,范围为css文档中的.sidebar类:

.sidebar  { 　　——left-pos:, 100 px; 　　}

可以通过如下方式获取——left-pos的值:

const  sidebarElement =, document.querySelector (& # 39; .sidebar& # 39;); 　　const  cssStyles =, getComputedStyle (sidebarElement); 　　const  cssVal =,字符串(cssStyles.getPropertyValue (& # 39;——left-pos& # 39;)) .trim (); 　　console.log (cssVal);,//100 px

设置css属性值:

sidebarElement.style.setProperty (& # 39;——left-pos& # 39;,, & # 39; 200 px # 39;);

<强> 3 * css变量和预处理变量有什么不同?

在样式化网站时,您可能通过使用Sass和少等预处理器来使得变量的更具有灵活性。

如何在css中自定义属性