CSS变量简介

2019-06-26 admin

CSS变量简介 如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6几乎完全没有jQuery,而十字线中的下一个似乎是CSS预处理器,如SASS和LESS。现代版Firefox和Chrome 支持 CSS变量(也称为CSS自定义属性),允许您直接在CSS中定义变量,然后可以在样式表中的任何位置引用变量,甚至可以使用JavaScript进行操作。结果是一个类固醇的CSS预处理器,一个在浏览器中本机运行以启动。随着IE Edge希望尽快支持这一功能,这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的CSS变量是什么。

基本语法 使用CSS变量是一个简单的两步过程:

使用语法在选择器内定义CSS变量–myvariable。选择器根据正常的CSS继承和特异性规则确定变量的范围及其适用的位置。:root例如,在选择器内定义的CSS变量可用于文档中的所有较低级别选择器(元素)。 使用语法引用CSS变量var(–myvariable) 作为静态CSS属性值的替代。 现在让我们看一个基本的例子,把踏板放到金属上!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Define CSS variables and scope / :root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables / body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

} 这里我定义了两个包含:root选择器内部颜色值的CSS变量 。内部定义变量的选择器设置其范围,所有降序选择器(元素)都能够访问这些变量。在:root 选择器中定义CSS变量基本上使它们全局可用。此时,变量尚未应用于任何地方,处于休眠状态并准备好使用。需要注意的是CSS变量情况不像其他的CSS属性敏感,因此–maincolor和–Maincolor被认为是两个不同的变量。

要使用CSS变量,我们使用var() 函数访问其值,方法是将变量名称传递给它。然后,我们选择所需的CSS属性来利用此变量的值。

您甚至可以将一个CSS变量的值全部或部分设置为另一个CSS变量:

1 2 3 4 5 6 7 8 9 10 11 / Define CSS variables and scope / :root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables / div.container{

color: var(--darkfont);
border: var(--darkborder);

} CSS变量的级联和继承 CSS变量的行为与其他CSS属性非常相似,因为它们的值级联和继承,与使用CSS预处理器定义的属性不同。以下演示了使用CSS变量进行级联:

1 2 3 4 5 6 7 8 9 10 11 root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

} 在这里,我–darkborder在两个不同的选择器中两次定义了相同的CSS变量。由于级联规则,BODY选择器内部的规则具有更高的特异性,并且在IMG元素中使用时会胜出。

CSS变量也默认继承,因此在父元素上定义的CSS属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点,其中使用UL元素上的CSS变量定义的UL边界也自动应用于子UL:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

} 输出截图:

Click screenshot to see live example

禁用继承 我们可以通过将CSS变量设置initial为所需选择器内的特殊值“ ” 来阻止CSS变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如,要通用地禁用CSS变量的继承,我们可以执行以下操作:

1 2 3 *{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

} 考虑下一个示例,该示例禁用–myborder UL UL级别的变量继承,因此在UL级别应用的变量不会向下传递到其后代:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 :root{

--myborder:CSS变量简介

如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6几乎完全没有jQuery,而十字线中的下一个似乎是CSS预处理器,如SASS和LESS。现代版Firefox和Chrome 支持 CSS变量(也称为CSS自定义属性),允许您直接在CSS中定义变量,然后可以在样式表中的任何位置引用变量,甚至可以使用JavaScript进行操作。结果是一个类固醇的CSS预处理器,一个在浏览器中本机运行以启动。随着IE Edge希望尽快支持这一功能,这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的CSS变量是什么。

基本语法 使用CSS变量是一个简单的两步过程:

使用语法在选择器内定义CSS变量–myvariable。选择器根据正常的CSS继承和特异性规则确定变量的范围及其适用的位置。:root例如,在选择器内定义的CSS变量可用于文档中的所有较低级别选择器(元素)。 使用语法引用CSS变量var(–myvariable) 作为静态CSS属性值的替代。 现在让我们看一个基本的例子,把踏板放到金属上!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Define CSS variables and scope / :root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables / body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

} 这里我定义了两个包含:root选择器内部颜色值的CSS变量 。内部定义变量的选择器设置其范围,所有降序选择器(元素)都能够访问这些变量。在:root 选择器中定义CSS变量基本上使它们全局可用。此时,变量尚未应用于任何地方,处于休眠状态并准备好使用。需要注意的是CSS变量情况不像其他的CSS属性敏感,因此–maincolor和–Maincolor被认为是两个不同的变量。

要使用CSS变量,我们使用var() 函数访问其值,方法是将变量名称传递给它。然后,我们选择所需的CSS属性来利用此变量的值。

您甚至可以将一个CSS变量的值全部或部分设置为另一个CSS变量:

1 2 3 4 5 6 7 8 9 10 11 / Define CSS variables and scope / :root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables / div.container{

color: var(--darkfont);
border: var(--darkborder);

} CSS变量的级联和继承 CSS变量的行为与其他CSS属性非常相似,因为它们的值级联和继承,与使用CSS预处理器定义的属性不同。以下演示了使用CSS变量进行级联:

1 2 3 4 5 6 7 8 9 10 11 root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

} 在这里,我–darkborder在两个不同的选择器中两次定义了相同的CSS变量。由于级联规则,BODY选择器内部的规则具有更高的特异性,并且在IMG元素中使用时会胜出。

CSS变量也默认继承,因此在父元素上定义的CSS属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点,其中使用UL元素上的CSS变量定义的UL边界也自动应用于子UL:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

} 输出截图:

Click screenshot to see live example

禁用继承 我们可以通过将CSS变量设置initial为所需选择器内的特殊值“ ” 来阻止CSS变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如,要通用地禁用CSS变量的继承,我们可以执行以下操作:

1 2 3 *{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

} 考虑下一个示例,该示例禁用–myborder UL UL级别的变量继承,因此在UL级别应用的变量不会向下传递到其后代:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

} 输出截图:

点击屏幕截图查看实时示例

重置CSS变量的值使您可以使用干净的平板,其中有多个CSS作者在页面上工作,并且可能存在重复的变量名称和非预期的继承。

使用calc()函数构建值 CSS变量也可以与函数一起使用, 因此数值可以是动态的,使CSS变量更接近JavaScript变量: calc()

1 2 3 4 5 6 7 8 9 10 11 :root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个CSS变量设置为一个数字,然后使用该 calc()函数导出H1和H2元素的下边距,这样后者就是前一个元素的一半。在calc()函数内部,为了导出实际单位(即:像素),我们对该单元执行乘法运算,例如乘以 --bottomgap1px。简单地将单元附加到变量的末尾将不起作用:

1 2 3 h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

} 您也可以简单地设置–bottomgap为开始时的实际长度,例如30px,并通过将H2除以2来计算H2元素的一半(除法运算的右侧必须始终为数字)。有关可接受语法的更多详细信息,请参阅该 函数。 calc()

CSS变量和JavaScript 甚至可以使用JavaScript访问和设置CSS变量,通过仅更改CSS变量值来简化CSS样式的操作方式。以下是获取和设置CSS变量值的两种JavaScript方法,无论属性是直接在元素上定义还是继承:

1 2 getComputedStyle(element).getPropertyValue(’–varname’) // get CSS variable value of an element, including any leading or trailing spaces element.style.setProperty(’–varname’, ‘newvalue’) // set CSS variable of an element to new value 要:root在JavaScript中访问元素/选择器,请使用 document.documentElement。当CSS变量的值更改时,浏览器会自动重新绘制以反映更改。您甚至可以将一个CSS变量的值设置为另一个CSS变量,从而在CSS值之间创建相互依赖性,从而产生有趣的效果:

1 element.style.setProperty(’–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another 以下示例通过仅使用JavaScript更新CSS变量来创建一个CSS条形时钟,该时钟告诉当前时间。每个CSS变量分别以当前的24小时,60分钟或60秒的百分比形式输入当前的小时,分钟或秒。例如,下午6点将转换为6/24,或小时字段的25%。我们使用这些值来确定每个条中要移动(变换)的背景伪元素的数量。结果如下:

JavaScript与CSS之间的唯一交互是CSS变量本身 - CSS变量为JavaScript开辟了一种新的,可以说是更清晰的方式来操纵CSS。

内联设置CSS变量 CSS变量也可以在元素上内联定义或设置,这样您就可以调整单个元素的CSS变量值。假设您已在样式表中设置了两个CSS变量,以定义UL内链接的静止和悬停背景颜色。但是,对于特定链接,您希望两种颜色与其他颜色不同。覆盖链接中两个CSS变量的默认值将是一种方法:

1 Home Here is a working demo of this:

定义未定义CSS变量时的回退值 当使用带有该var(–cssvariable)函数的CSS变量时,可以使用第二个参数填充该函数,该参数在未定义进程变量的情况下成为回退值。例如:

​1 2 background: var(–primarybg, white); / Normal value as fallback value / font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value / 如您所见,回退值本身可以是另一个CSS var() 函数,在未定义变量的情况下,该函数又可以包含另一个回退值。

CSS变量回退显然只能由支持CSS变量的浏览器获取。要为不支持该功能的浏览器提供后备值,您可以执行以下操作:

1 2 background: white; / background value for browsers that don’t support CSS variables / background: var(–primarybg, white); 现在大家都开心了!

结论 像SASS这样的CSS预处理器在前端开发人员中得到了广泛的采用,尽管它们的编译本身固有地限制了它们的功能。与CSS预处理器不同,CSS变量是常规,级联和继承,就像常规CSS属性一样,甚至可以使用JavaScript进行操作。但也许CSS变量的最大优点是浏览器本身支持它们,消除了即使是新手Web开发人员潜入的任何技术障碍。

5px solid orange; }CSS变量简介 如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6几乎完全没有jQuery,而十字线中的下一个似乎是CSS预处理器,如SASS和LESS。现代版Firefox和Chrome 支持 CSS变量(也称为CSS自定义属性),允许您直接在CSS中定义变量,然后可以在样式表中的任何位置引用变量,甚至可以使用JavaScript进行操作。结果是一个类固醇的CSS预处理器,一个在浏览器中本机运行以启动。随着IE Edge希望尽快支持这一功能,这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的CSS变量是什么。

基本语法 使用CSS变量是一个简单的两步过程:

使用语法在选择器内定义CSS变量–myvariable。选择器根据正常的CSS继承和特异性规则确定变量的范围及其适用的位置。:root例如,在选择器内定义的CSS变量可用于文档中的所有较低级别选择器(元素)。 使用语法引用CSS变量var(–myvariable) 作为静态CSS属性值的替代。 现在让我们看一个基本的例子,把踏板放到金属上!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Define CSS variables and scope / :root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables / body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

} 这里我定义了两个包含:root选择器内部颜色值的CSS变量 。内部定义变量的选择器设置其范围,所有降序选择器(元素)都能够访问这些变量。在:root 选择器中定义CSS变量基本上使它们全局可用。此时,变量尚未应用于任何地方,处于休眠状态并准备好使用。需要注意的是CSS变量情况不像其他的CSS属性敏感,因此–maincolor和–Maincolor被认为是两个不同的变量。

要使用CSS变量,我们使用var() 函数访问其值,方法是将变量名称传递给它。然后,我们选择所需的CSS属性来利用此变量的值。

您甚至可以将一个CSS变量的值全部或部分设置为另一个CSS变量:

1 2 3 4 5 6 7 8 9 10 11 / Define CSS variables and scope / :root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables / div.container{

color: var(--darkfont);
border: var(--darkborder);

} CSS变量的级联和继承 CSS变量的行为与其他CSS属性非常相似,因为它们的值级联和继承,与使用CSS预处理器定义的属性不同。以下演示了使用CSS变量进行级联:

1 2 3 4 5 6 7 8 9 10 11 root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

} 在这里,我–darkborder在两个不同的选择器中两次定义了相同的CSS变量。由于级联规则,BODY选择器内部的规则具有更高的特异性,并且在IMG元素中使用时会胜出。

CSS变量也默认继承,因此在父元素上定义的CSS属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点,其中使用UL元素上的CSS变量定义的UL边界也自动应用于子UL:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

} 输出截图:

Click screenshot to see live example

禁用继承 我们可以通过将CSS变量设置initial为所需选择器内的特殊值“ ” 来阻止CSS变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如,要通用地禁用CSS变量的继承,我们可以执行以下操作:

1 2 3 *{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

} 考虑下一个示例,该示例禁用–myborder UL UL级别的变量继承,因此在UL级别应用的变量不会向下传递到其后代:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

} 输出截图:

点击屏幕截图查看实时示例

重置CSS变量的值使您可以使用干净的平板,其中有多个CSS作者在页面上工作,并且可能存在重复的变量名称和非预期的继承。

使用calc()函数构建值 CSS变量也可以与函数一起使用, 因此数值可以是动态的,使CSS变量更接近JavaScript变量: calc()

1 2 3 4 5 6 7 8 9 10 11 :root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个CSS变量设置为一个数字,然后使用该 calc()函数导出H1和H2元素的下边距,这样后者就是前一个元素的一半。在calc()函数内部,为了导出实际单位(即:像素),我们对该单元执行乘法运算,例如乘以 --bottomgap1px。简单地将单元附加到变量的末尾将不起作用:

1 2 3 h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

} 您也可以简单地设置–bottomgap为开始时的实际长度,例如30px,并通过将H2除以2来计算H2元素的一半(除法运算的右侧必须始终为数字)。有关可接受语法的更多详细信息,请参阅该 函数。 calc()

CSS变量和JavaScript 甚至可以使用JavaScript访问和设置CSS变量,通过仅更改CSS变量值来简化CSS样式的操作方式。以下是获取和设置CSS变量值的两种JavaScript方法,无论属性是直接在元素上定义还是继承:

1 2 getComputedStyle(element).getPropertyValue(’–varname’) // get CSS variable value of an element, including any leading or trailing spaces element.style.setProperty(’–varname’, ‘newvalue’) // set CSS variable of an element to new value 要:root在JavaScript中访问元素/选择器,请使用 document.documentElement。当CSS变量的值更改时,浏览器会自动重新绘制以反映更改。您甚至可以将一个CSS变量的值设置为另一个CSS变量,从而在CSS值之间创建相互依赖性,从而产生有趣的效果:

1 element.style.setProperty(’–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another 以下示例通过仅使用JavaScript更新CSS变量来创建一个CSS条形时钟,该时钟告诉当前时间。每个CSS变量分别以当前的24小时,60分钟或60秒的百分比形式输入当前的小时,分钟或秒。例如,下午6点将转换为6/24,或小时字段的25%。我们使用这些值来确定每个条中要移动(变换)的背景伪元素的数量。结果如下:

JavaScript与CSS之间的唯一交互是CSS变量本身 - CSS变量为JavaScript开辟了一种新的,可以说是更清晰的方式来操纵CSS。

内联设置CSS变量 CSS变量也可以在元素上内联定义或设置,这样您就可以调整单个元素的CSS变量值。假设您已在样式表中设置了两个CSS变量,以定义UL内链接的静止和悬停背景颜色。但是,对于特定链接,您希望两种颜色与其他颜色不同。覆盖链接中两个CSS变量的默认值将是一种方法:

1 Home Here is a working demo of this:

定义未定义CSS变量时的回退值 当使用带有该var(–cssvariable)函数的CSS变量时,可以使用第二个参数填充该函数,该参数在未定义进程变量的情况下成为回退值。例如:

​1 2 background: var(–primarybg, white); / Normal value as fallback value / font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value / 如您所见,回退值本身可以是另一个CSS var() 函数,在未定义变量的情况下,该函数又可以包含另一个回退值。

CSS变量回退显然只能由支持CSS变量的浏览器获取。要为不支持该功能的浏览器提供后备值,您可以执行以下操作:

1 2 background: white; / background value for browsers that don’t support CSS variables / background: var(–primarybg, white); 现在大家都开心了!

结论 像SASS这样的CSS预处理器在前端开发人员中得到了广泛的采用,尽管它们的编译本身固有地限制了它们的功能。与CSS预处理器不同,CSS变量是常规,级联和继承,就像常规CSS属性一样,甚至可以使用JavaScript进行操作。但也许CSS变量的最大优点是浏览器本身支持它们,消除了即使是新手Web开发人员潜入的任何技术障碍。

CSS变量简介 如今的浏览器开发似乎正好取代了流行的库和扩展目前为我们提供的功能。ECMAScript 6几乎完全没有jQuery,而十字线中的下一个似乎是CSS预处理器,如SASS和LESS。现代版Firefox和Chrome 支持 CSS变量(也称为CSS自定义属性),允许您直接在CSS中定义变量,然后可以在样式表中的任何位置引用变量,甚至可以使用JavaScript进行操作。结果是一个类固醇的CSS预处理器,一个在浏览器中本机运行以启动。随着IE Edge希望尽快支持这一功能,这些令人兴奋的时刻确实是一个前端开发人员。让我们看看本教程中的CSS变量是什么。

基本语法 使用CSS变量是一个简单的两步过程:

使用语法在选择器内定义CSS变量–myvariable。选择器根据正常的CSS继承和特异性规则确定变量的范围及其适用的位置。:root例如,在选择器内定义的CSS变量可用于文档中的所有较低级别选择器(元素)。 使用语法引用CSS变量var(–myvariable) 作为静态CSS属性值的替代。 现在让我们看一个基本的例子,把踏板放到金属上!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / Define CSS variables and scope / :root{

--maincolor: black;
--secondarycolor: crimson;

}

/ Use CSS Variables / body{

background: var(--maincolor);
color: white;

}

body p{

background: var(--secondarycolor);

} 这里我定义了两个包含:root选择器内部颜色值的CSS变量 。内部定义变量的选择器设置其范围,所有降序选择器(元素)都能够访问这些变量。在:root 选择器中定义CSS变量基本上使它们全局可用。此时,变量尚未应用于任何地方,处于休眠状态并准备好使用。需要注意的是CSS变量情况不像其他的CSS属性敏感,因此–maincolor和–Maincolor被认为是两个不同的变量。

要使用CSS变量,我们使用var() 函数访问其值,方法是将变量名称传递给它。然后,我们选择所需的CSS属性来利用此变量的值。

您甚至可以将一个CSS变量的值全部或部分设置为另一个CSS变量:

1 2 3 4 5 6 7 8 9 10 11 / Define CSS variables and scope / :root{

--darkfont: brown;
--darkborder: 5px dashed var(--darkfont);

}

/ Use CSS Variables / div.container{

color: var(--darkfont);
border: var(--darkborder);

} CSS变量的级联和继承 CSS变量的行为与其他CSS属性非常相似,因为它们的值级联和继承,与使用CSS预处理器定义的属性不同。以下演示了使用CSS变量进行级联:

1 2 3 4 5 6 7 8 9 10 11 root{

--darkborder: 5px solid black;

}

body{

--darkborder: 1px solid darkred;

}

img{

border: var(--darkborder); /* img border will be 1px solid red */

} 在这里,我–darkborder在两个不同的选择器中两次定义了相同的CSS变量。由于级联规则,BODY选择器内部的规则具有更高的特异性,并且在IMG元素中使用时会胜出。

CSS变量也默认继承,因此在父元素上定义的CSS属性的值在这些元素中使用时会向下渗透到子元素。我们在下面的示例中看到了这一点,其中使用UL元素上的CSS变量定义的UL边界也自动应用于子UL:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

margin-left: 30px;

} 输出截图:

Click screenshot to see live example

禁用继承 我们可以通过将CSS变量设置initial为所需选择器内的特殊值“ ” 来阻止CSS变量在某个级别继承。这样做会将该属性重置为在该范围级别默认为“空”。例如,要通用地禁用CSS变量的继承,我们可以执行以下操作:

1 2 3 *{

--somevar: initial; /* disable inheritance for --somevar variable everywhere */

} 考虑下一个示例,该示例禁用–myborder UL UL级别的变量继承,因此在UL级别应用的变量不会向下传递到其后代:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 :root{

--myborder: 5px solid orange;

}

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

} 输出截图:

点击屏幕截图查看实时示例

重置CSS变量的值使您可以使用干净的平板,其中有多个CSS作者在页面上工作,并且可能存在重复的变量名称和非预期的继承。

使用calc()函数构建值 CSS变量也可以与函数一起使用, 因此数值可以是动态的,使CSS变量更接近JavaScript变量: calc()

1 2 3 4 5 6 7 8 9 10 11 :root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个CSS变量设置为一个数字,然后使用该 calc()函数导出H1和H2元素的下边距,这样后者就是前一个元素的一半。在calc()函数内部,为了导出实际单位(即:像素),我们对该单元执行乘法运算,例如乘以 --bottomgap1px。简单地将单元附加到变量的末尾将不起作用:

1 2 3 h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

} 您也可以简单地设置–bottomgap为开始时的实际长度,例如30px,并通过将H2除以2来计算H2元素的一半(除法运算的右侧必须始终为数字)。有关可接受语法的更多详细信息,请参阅该 函数。 calc()

CSS变量和JavaScript 甚至可以使用JavaScript访问和设置CSS变量,通过仅更改CSS变量值来简化CSS样式的操作方式。以下是获取和设置CSS变量值的两种JavaScript方法,无论属性是直接在元素上定义还是继承:

1 2 getComputedStyle(element).getPropertyValue(’–varname’) // get CSS variable value of an element, including any leading or trailing spaces element.style.setProperty(’–varname’, ‘newvalue’) // set CSS variable of an element to new value 要:root在JavaScript中访问元素/选择器,请使用 document.documentElement。当CSS变量的值更改时,浏览器会自动重新绘制以反映更改。您甚至可以将一个CSS变量的值设置为另一个CSS变量,从而在CSS值之间创建相互依赖性,从而产生有趣的效果:

1 element.style.setProperty(’–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another 以下示例通过仅使用JavaScript更新CSS变量来创建一个CSS条形时钟,该时钟告诉当前时间。每个CSS变量分别以当前的24小时,60分钟或60秒的百分比形式输入当前的小时,分钟或秒。例如,下午6点将转换为6/24,或小时字段的25%。我们使用这些值来确定每个条中要移动(变换)的背景伪元素的数量。结果如下:

JavaScript与CSS之间的唯一交互是CSS变量本身 - CSS变量为JavaScript开辟了一种新的,可以说是更清晰的方式来操纵CSS。

内联设置CSS变量 CSS变量也可以在元素上内联定义或设置,这样您就可以调整单个元素的CSS变量值。假设您已在样式表中设置了两个CSS变量,以定义UL内链接的静止和悬停背景颜色。但是,对于特定链接,您希望两种颜色与其他颜色不同。覆盖链接中两个CSS变量的默认值将是一种方法:

1 Home Here is a working demo of this:

定义未定义CSS变量时的回退值 当使用带有该var(–cssvariable)函数的CSS变量时,可以使用第二个参数填充该函数,该参数在未定义进程变量的情况下成为回退值。例如:

​1 2 background: var(–primarybg, white); / Normal value as fallback value / font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value / 如您所见,回退值本身可以是另一个CSS var() 函数,在未定义变量的情况下,该函数又可以包含另一个回退值。

CSS变量回退显然只能由支持CSS变量的浏览器获取。要为不支持该功能的浏览器提供后备值,您可以执行以下操作:

1 2 background: white; / background value for browsers that don’t support CSS variables / background: var(–primarybg, white); 现在大家都开心了!

结论 像SASS这样的CSS预处理器在前端开发人员中得到了广泛的采用,尽管它们的编译本身固有地限制了它们的功能。与CSS预处理器不同,CSS变量是常规,级联和继承,就像常规CSS属性一样,甚至可以使用JavaScript进行操作。但也许CSS变量的最大优点是浏览器本身支持它们,消除了即使是新手Web开发人员潜入的任何技术障碍。

ul{

list-style: none;
padding: 10px;
margin: 0;
border-left: var(--myborder);

}

ul ul{

--myborder: initial; /* reset --myborder variable */
margin-left: 30px;

} 输出截图:

点击屏幕截图查看实时示例

重置CSS变量的值使您可以使用干净的平板,其中有多个CSS作者在页面上工作,并且可能存在重复的变量名称和非预期的继承。

使用calc()函数构建值 CSS变量也可以与函数一起使用, 因此数值可以是动态的,使CSS变量更接近JavaScript变量: calc()

1 2 3 4 5 6 7 8 9 10 11 :root{

--bottomgap: 30;

}

h1{

margin-bottom: calc(var(--bottomgap) * 1px)

}

h2{

margin-bottom: calc(var(--bottomgap) * .5px) /* half of H1 gap */

}

这里我将一个CSS变量设置为一个数字,然后使用该 calc()函数导出H1和H2元素的下边距,这样后者就是前一个元素的一半。在calc()函数内部,为了导出实际单位(即:像素),我们对该单元执行乘法运算,例如乘以 --bottomgap1px。简单地将单元附加到变量的末尾将不起作用:

1 2 3 h1{

margin-bottom: calc(var(--bottomgap)px); /* doesn't work */

} 您也可以简单地设置–bottomgap为开始时的实际长度,例如30px,并通过将H2除以2来计算H2元素的一半(除法运算的右侧必须始终为数字)。有关可接受语法的更多详细信息,请参阅该 函数。 calc()

CSS变量和JavaScript 甚至可以使用JavaScript访问和设置CSS变量,通过仅更改CSS变量值来简化CSS样式的操作方式。以下是获取和设置CSS变量值的两种JavaScript方法,无论属性是直接在元素上定义还是继承:

1 2 getComputedStyle(element).getPropertyValue(’–varname’) // get CSS variable value of an element, including any leading or trailing spaces element.style.setProperty(’–varname’, ‘newvalue’) // set CSS variable of an element to new value 要:root在JavaScript中访问元素/选择器,请使用 document.documentElement。当CSS变量的值更改时,浏览器会自动重新绘制以反映更改。您甚至可以将一个CSS变量的值设置为另一个CSS变量,从而在CSS值之间创建相互依赖性,从而产生有趣的效果:

1 element.style.setProperty(’–divheight’, ‘calc(var(–divwidth)/2)’) // set one CSS property to the value of another 以下示例通过仅使用JavaScript更新CSS变量来创建一个CSS条形时钟,该时钟告诉当前时间。每个CSS变量分别以当前的24小时,60分钟或60秒的百分比形式输入当前的小时,分钟或秒。例如,下午6点将转换为6/24,或小时字段的25%。我们使用这些值来确定每个条中要移动(变换)的背景伪元素的数量。结果如下:

JavaScript与CSS之间的唯一交互是CSS变量本身 - CSS变量为JavaScript开辟了一种新的,可以说是更清晰的方式来操纵CSS。

内联设置CSS变量 CSS变量也可以在元素上内联定义或设置,这样您就可以调整单个元素的CSS变量值。假设您已在样式表中设置了两个CSS变量,以定义UL内链接的静止和悬停背景颜色。但是,对于特定链接,您希望两种颜色与其他颜色不同。覆盖链接中两个CSS变量的默认值将是一种方法:

1 Home Here is a working demo of this:

定义未定义CSS变量时的回退值 当使用带有该var(–cssvariable)函数的CSS变量时,可以使用第二个参数填充该函数,该参数在未定义进程变量的情况下成为回退值。例如:

​1 2 background: var(–primarybg, white); / Normal value as fallback value / font-size: var(–defaultsize, var(–fallbacksize, 36px)); / var() as fallback value / 如您所见,回退值本身可以是另一个CSS var() 函数,在未定义变量的情况下,该函数又可以包含另一个回退值。

CSS变量回退显然只能由支持CSS变量的浏览器获取。要为不支持该功能的浏览器提供后备值,您可以执行以下操作:

1 2 background: white; / background value for browsers that don’t support CSS variables / background: var(–primarybg, white); 现在大家都开心了!

结论 像SASS这样的CSS预处理器在前端开发人员中得到了广泛的采用,尽管它们的编译本身固有地限制了它们的功能。与CSS预处理器不同,CSS变量是常规,级联和继承,就像常规CSS属性一样,甚至可以使用JavaScript进行操作。但也许CSS变量的最大优点是浏览器本身支持它们,消除了即使是新手Web开发人员潜入的任何技术障碍。

[转载]原文链接:https://segmentfault.com/a/1190000019590061

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68266.html

文章标题:CSS变量简介

相关文章
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
7个你可能不认识的CSS单位
浼楁墍鍛ㄧ煡CSS鎶€鏈�鎴戜滑铏界劧寰堢啛鎮夛紝鍦ㄤ娇鐢ㄧ殑杩囩▼鍗村緢瀹规槗琚�鍥颁綇锛岃繖璁╂垜浠�鍦ㄦ柊闂�棰樺嚭鐜扮殑鏃跺€欏彉寰楀緢涓嶅埄銆� 闅忕潃web缁х画涓嶆柇鍦板彂灞曪紝瀵逛簬鏂版妧鏈�鏂拌В鍐虫柟妗堢殑瑕佹眰涔熶細涓...
2015-11-11
JavaScript变量作用域
当你声明一个变量的任何功能外,它被称为一个全局变量,在代码中任何地方都能访问到的对象拥有全局作用域。 当你声明一个变量在一个函数,它被称为一个局部变量,只能在函数内部访问。 JavaScript在ECMAScript 6之前没有块语句的规范...
2015-11-12
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
css3.0参考手册
下载地址:css3.0参考手册 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
简介JavaScript中search()方法的使用
此方法执行搜索正则表达式,String对象之间的匹配。 语法 下面是参数的详细信息: regexp : 正则表达式对象。如果非RegExp对象obj传递,它是隐式通过使用new RegExp(obj) 转换为RegExp 返回值: 如...
2017-03-24
简介JavaScript中的setDate()方法的使用
javascript Date.setDate()方法按照本地时间设置月份的某一天,在指定的日期。 语法 下面是参数的详细信息: dayValue : 从1到31的整数,代表一个月份中某一天。 返回值: 例子: 下面的第二条语句从原来的...
2017-03-24
简介JavaScript中toTimeString()方法的使用
该方法返回一个Date对象在人类可读的形式时间部分。 语法 下面是参数的详细信息: 返回值: 返回Date对象的人类可读形式的时间部分。 例子: <html> <head> <title>JavaScri...
2017-03-24
使用HTML+CSS+JS制作简单的网页菜单界面
写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实...
2017-03-27
简介JavaScript中的push()方法的使用
JavaScript的数组push()方法追加在最后该数组的给定元素(多个),并返回新的数组的长度。 语法 array.push(element1, ..., elementN); 下面是参数的详细信息: element1, …, el...
2017-03-24
回到顶部