css变量(官方称为自定义属性)是用户定义的值,它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易,并确保整个web应用的一致性。
举个例子,你可以将品牌颜色设置为一个CSS属性( --primarycolor: #7232FA ),并在任何使用品牌颜色的组件或样式中使用这个值( background: var(--primarycolor); )。
除了更加简洁以及不重复的代码,CSS变量可用于构建调色板,提高响应能力,并创建动态类型系统。
要定义一个自定义属性,选择一个名称并在其前面加上两个连字符。任何字母数字字符都可以是名称的一部分。连字符( - )和下划线( _ )也是被允许的。大范围的Unicode字符可以成为自定义属性名称的一部分。这也包括emoji,但为了清晰度和可读性,请坚持使用字母数字名称。
下面是个例子:
--primarycolor: #0ad0f9ff; /* RGB alpha 16进制颜色 */
-- 向CSS解释器表明这是一个自定义属性。当作为一个变量使用时,解释器引擎会将该属性替换为其值。
自定义属性名称是区分大小写的。这意味着 --primaryColor 和 --primarycolor 被认为是两种不同的属性名称。这与传统的CSS不同,在传统的CSS中,属性和值的大小写并不重要。然而,它与ECMAScript中的变量名规则是一致的。
与其他属性一样,比如说 display 或者 font ,CSS自定义属性必须定义在声明块内。一个常见的模式是使用 :root 伪元素作为选择器来定义自定义属性。
:root {
--primarycolor: #0ad0f9ff;
}
:root 是一个伪元素,它指向文档中的根元素。对html文档而言,指向的就是 <html> 元素。对SVG文档而言,指向的就是 <svg> 元素。使用 :root 会让属性在整个文档中立即可用。
为了让自定义属性作为变量来使用,我们需要使用 var() 函数。例如,如果我们想将 --primarycolor 自定义属性作为背景颜色来使用,我们需要这么做:
body {
background-color: var(--primarycolor);
}
我们自定义属性的值将成为 background-color 属性的计算值。
到目前为止,自定义属性只能被用作变量来为标准的CSS属性设置值。例如,你不能把一个属性名称存储为一个变量,然后重用它。以下的CSS就无法运行:
:root {
--top-border: border-top; /* Can't set a property as custom property's value */
var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */
}
你也不能把属性-值对存储为一个变量,然后重用它。下面的例子也是无效的:
:root {
--text-color: 'color: orange'; /* Invalid property value */
}
body {
var(--text-color); /* Invalid use of a property */
}
最后,你不能把一个变量作为值的一部分拼接起来:
:root {
--base-font-size: 10;
}
body {
font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}
"自定义属性"是一个面向未来的名称,它说明了这个功能有一天可能会被使用。然而,如果浏览器供应商实施了 CSS扩展 规范,这种情况就会改变。该规范定义了用自定义选择器组合、函数和 at-rules 来扩展CSS的方法。
我们通常称自定义属性为 "变量",到目前为止,这也是我们可以使用它们的唯一方式。在理论上,它们并不是完全可以互换的术语。不过目前为止在实践中是可以互换的术语。在这篇文章中,我主要使用 自定义属性 ,因为那是它们的正确叫法。如果能是句子更加清晰,我将使用 变量 的叫法。
var() 函数接收两个参数。第一个参数是自定义属性名称。第二个参数是可选的,但必须是声明值。这个声明值的功能是当自定义属性值没有被定义时,作为一个备用值或默认值被应用。
让我们来看看下面的CSS:
.btn__call-to-action {
background: var(--accent-color, deepskyblue);
}
如果定义了 --accent-color ,我们假设其值为 #f30 ,那么任何带有 .btn__call-to-action 类的背景色将是橘红色的。如果没有定义,背景色将是深天蓝色。
声明值也可以嵌套。换句话说,可以使用变量作为 var 函数的备用值。
body {
background-color: var(--books-bg, var(--arts-bg));
}
在上面CSS中,如果定义了 --books-bg ,背景色将会被设置为 --books-bg 属性的值。如果没有定义,背景色将是分配给 --arts-bg 的任何值。如果两个属性都没有定义,背景色将会是属性的初始值。在这个例子中,初始值为 transparent 。
当一个自定义属性的值对它所使用的属性来说是无效的,也会发生类似的情况。可以考虑下面的CSS:
:root {
--text-primary: #600;
--footer-link-hover: #0cg; /* Not a valid color value */
}
body {
color: var(--text-primary);
}
a:link {
color: blue;
}
a:hover {
color: red;
}
footer a:hover {
color: var(--footer-link-hover);
}
在这个例子中, --footer-link-hover 属性的值不是有效颜色。反而, footer a:hover 从 <body> 元素中继承了 color 值。
解析自定义属性的方式与解析其他CSS值的方式相同。倘若值是无效的或者未定义的,如果属性是可继承的,CSS解析器就会使用继承的值(比如说 color 或 font )。如果属性是不可继承的,CSS解析器就会使用初始值(比如说 background-color )。
自定义属性也遵循层叠的规则。它们的值会被后续的规则所覆盖:
:root {
--text-color: #190736; /* navy */
}
body {
--text-color: #333; /* dark gray */
}
body {
color: var(--text-color);
}
在上述示例中, body 字体颜色将会是深灰色。我们还可以在每个选择器的基础上重置值。让我们向这个CSS添加更多的规则:
:root {
--text-color: #190736; /* navy */
}
body {
--text-color: #333; /* dark gray */
}
p {
--text-color: #f60; /* orange */
}
body {
color: var(--text-color);
}
p {
color: var(--text-color)
}
在这个例子中,任何包裹在 <p> 标签内的文本会是橘黄色。但是 <div> 内的文本或是其他元素内的文本仍然是深灰色。
也可以使用 style 属性来设置自定义属性的值。比如说, 。
自定义属性特别适合管理HSL调色板。HSL代表 hue, saturation, lightness 。这是一款基于亮度的颜色模型,类似于RGB。我们可以在CSS中使用HSL,这要归功于 hsl() 和 hsla() 颜色函数。 hsl() 函数接收三个参数,分别是hue, saturation, 和 lightness,也就是色相、饱和度、亮度。 hsla() 函数同时接收第四个参数,表示颜色的 alpha 透明度(取值范围是0-1之间)。
RGB系统用红、绿、蓝的比例来表达颜色,而HSL则使用一个颜色圈,色相是该圈上的一个度数位置,而色调或阴影则用饱和度和亮度值来定义。饱和度的范围从0%到100%,其中0%是灰色,100%是全色。亮度的范围也是从0%到100%,其中0%是黑色,100%是白色,50%是正常颜色。
在HSL颜色系统中,主要颜色红、绿、蓝三原色在0度/360度、120度和240度处相距120度。二级颜色--青色、品红和黄色--也相距120度,但位于主要颜色的对面,分别为180度、300度和60度/420度。三级、四级和其他颜色则以大约10度的增量介于两者之间。蓝色用HSL来写的话,将会是 hsl(240, 100%, 50%) 。
当你在 hsl() 和 hsla() 函数的第一个参数中使用无单位的值时,浏览器会假定它是一个以度为单位的角度。然而,你可以使用任何 受支持的CSS角度单位 。蓝色也可以表示为 hsl(240deg, 100%, 50%) , hsl(4.188rad, 100%, 50%) 或者 hsla(0.66turn, 100%, 50%) 。
这就是有趣的地方。我们可以使用自定义属性设置色相值,以及通过调整饱和度和亮度来设置更亮和更暗的阴影:
:root {
--brand-hue: 270deg; /* purple */
--brand-hue-alt: .25turn; /* green */
/*
hsl()和hsla()可以接受逗号分隔的参数或空格分隔的参数。
但旧的浏览器(如Internet Explorer 11)只支持逗号分隔的参数。
*/
--brand-primary: hsl( var( --brand-hue ) 100% 50% );
--brand-highlight: hsl( var( --brand-hue ) 100% 75% );
--brand-lowlight: hsl( var( --brand-hue ) 100% 25% );
--brand-inactive: hsl( var( --brand-hue ) 50% 50% );
--brand-secondary: hsl( var( --brand-hue-alt ) 100% 50% );
--brand-2nd-highlight: hsl( var( --brand-hue-alt ) 100% 75% );
--brand-2nd-lowlight: hsl( var( --brand-hue-alt ) 100% 25% );
--brand-2nd-inactive: hsl( var( --brand-hue-alt ) 50% 50% );
}
上面的CSS提供了下面所示的调色板。
这是一个简易版本,但你也可以使用自定义属性来调整饱和度和亮度值。
另一个想法是结合自定义属性和 calc() 函数,从一个基本色调中生成一个方形的配色方案。让我们在下面的例子中创建一个方形配色方案。一个方形配色方案由四种颜色组成,这些颜色在色轮上彼此等距,也就是相距90度:
:root {
--base-hue: 310deg; /* Hot pink */
--distance: 90deg;
--color-a: hsl( var(--base-hue), 100%, 50% );
--color-b: hsl( calc( var(--base-hue) + var( --distance ) ), 100%, 50% );
--color-c: hsl( calc( var(--base-hue) + ( var( --distance ) * 2 ) ), 100%, 50% );
--color-d: hsl( calc( var(--base-hue) + ( var( --distance ) * 3 ) ), 100%, 50% );
}
CSS为我们提供了如下所示的颇具热带风情的色彩方案。
自定义属性也能很好地与媒体查询相互配合,我们会在后面章节中看到。
你可以使用CSS自定义变量为你的网站,定义与深色和浅色主题相关的一系列的变量。
以下面的页面样式为例,我们可以在 :root 中为相应的颜色定义了自定义属性后,用变量替换不同选择器中所有的HSL颜色:
:root {
/*...*/
--nav-bg-color: hsl(var(--primarycolor) , 50%, 50%);
--nav-text-color: hsl(var(--primarycolor), 50%, 10%);
--container-bg-color: hsl(var(--primarycolor) , 50%, 95%);
--content-text-color: hsl(var(--primarycolor) , 50%, 50%);
--title-color: hsl(var(--primarycolor) , 50%, 20%);
--footer-bg-color: hsl(var(--primarycolor) , 93%, 88%);
--button-text-color: hsl(var(--primarycolor), 50%, 20%);
}
已经为自定义属性使用了适当的名称。比如说, --nav-bg-color 指的是导航栏背景色, --nav-text-color 指的是导航栏前景色或者文本色。
然后,复制 :root 选择器及其内容,但要为其添加一个带有 dark 值的主题属性:
:root[theme='dark']{
/*...*/
}
如果带有 dark 值的主题属性被添加到 <html> 元素上,那么该主题将被激活。
现在我们可以手动操作这些变量值,通过减少HSL颜色的亮度值来提供一个深色主题。或者我们可以使用其他技术,如 invert() 和 brightness() 等CSS过滤器,它们通常用于调整图像的渲染,但也可用于其他任何元素。
添加如下代码到 :root[theme='dark'] 中:
:root[theme='dark'] {
--dark-hue: 240;
--light-hue: 250;
--primarycolor: var(--dark-hue);
--nav-bg-color: hsl(var(--primarycolor), 50%, 90%);
--nav-text-color: hsl(var(--primarycolor), 50%, 10%);
--container-bg-color: hsl(var(--primarycolor), 50%, 95%);
--content-text-color: hsl(var(--primarycolor), 50%, 50%);
--title-color: hsl(--primarycolor, 50%, 20%);
--footer-bg-color: hsl(var(--primarycolor), 93%, 88%);
--button-text-color: hsl(var(--primarycolor), 50%, 20%);
filter: invert(1) brightness(0.6);
}
invert() 过滤器会反转所选元素的所有颜色(在本例中是每个元素)。反转的值可以用百分比或数字来指定。参数值100%或1将完全反转元素的色相、饱和度和亮度值。
brightness() 过滤器使元素更加明亮或者暗黑。如果数值为0,就会出现一个完全暗黑的元素。
invert() 过滤器会使一些元素变得非常明亮。需要通过设置 brightness(0.6) 来降低亮度。
具有不同程度深色的深色主题:
现在,当用户点击深色/浅色按钮时,我们使用JavaScript来切换深色和浅色主题。在HTML </body> 标签闭合前添加行内 <script> 标签,标签内具有如下代码:
const toggleBtn = document.querySelector("#toggle-theme");
toggleBtn.addEventListener('click', e => {
console.log("Switching theme");
if(document.documentElement.hasAttribute('theme')){
document.documentElement.removeAttribute('theme');
}
else{
document.documentElement.setAttribute('theme', 'dark');
}
});
Document.documentElement指的是文档中的根dom元素,也就是 <html> 。这段代码使用 .hasAttribute() 方法检查 theme 属性是否存在。如果不存在,就将 dark 添加到该属性上,从而导致切换到深色主题。否则,它将删除该属性,从而导致切换到浅色主题。
注意:你还应该把它与CSS中的 prefers-color-scheme 功能结合起来使用,它可以用来从用户的操作系统或用户代理(浏览器)设置中自动改变浅色/深色主题。这将在下一节中展示。
我们还可以在媒体查询中使用自定义属性。比如说,你可以使用自定义属性来定义明暗配色方案:
:root {
--background-primary: hsl(34, 78%, 91%);
--text-primary: hsl(25, 76%, 10%);
--button-primary-bg: hsl(214, 77%, 10%);
--button-primary-fg: hsl(214, 77%, 98%);
}
@media screen and ( prefers-color-scheme: dark ) {
:root {
--background-primary: hsl(25, 76%, 10%);
--text-primary: hsl(34, 78%, 91%);
--button-primary-bg: hsl(214, 77%, 98%);
--button-primary-fg: hsl(214, 77%, 10%);
}
}
同样地,我们可以使用自定义属性来改变适合于屏幕与打印的基准字体大小。
:root {
--base-font-size: 10px;
}
@media print {
:root {
--base-font-size: 10pt;
}
}
html {
font: var(--base-font-size) / 1.5 sans-serif;
}
body {
font-size: 1.6rem;
}
在本例中,我们正在使用适合于打印和屏幕的媒体单位。对于这两种媒体,我们将使用10个单位的基准字体大小,对于屏幕来说是像素(px),对于打印来说是点(pt)。我们还将使用 --base-font-size: 的值来为我们的根元素( html )设置一个起始尺寸。然后我们可以 rem 单位来调整相对于基准字体尺寸的排版。
请记住:自定义属性是CSS属性,而且我们可以与它们进行互动。比如说,我们可以使用 CSS.supports() api来检测浏览器是否支持自定义属性:
const supportsCustomProps = CSS.supports('--primary-text: #000');
// 如果浏览器支持自定义属性,则打印true
console.log(supportsCustomProps);
我们也可以使用 setProperty() 方法来设置自定义属性值:
document.body.style.setProperty('--bg-home', 'whitesmoke');
使用 removeProperty() 的方式也是类似的。只需传递自定义属性名称作为参数:
document.body.style.removeProperty('--bg-home');
要使用自定义属性作为JavaScript的值,可以使用 var() 函数,并将属性名称作为其参数。
document.body.style.backgroundColor = 'var(--bg-home)';
还有,你不能使用 style 对象的方括号语法或驼峰属性来设置自定义属性。换句话说, document.body.style.--bg-home 或 document.body.style['--bg-home'] 都无法发挥作用。
像react、angular和vue这样的JavaScript框架让开发者使用JavaScript来创建可重用、可共享的HTML块,通常会在组件层面上定义CSS。
这是一个有关React组件的示例,使用JSX语法编写:
import React from 'react';
/* Importing the associated CSS into this component */
import '../css/field-button.css';
class FieldButtonGroup extends React.Component {
render() {
return (
<div className="field__button__group">
<label htmlFor={this.props.id}>{this.props.labelText}</label>
<div>
<input type={this.props.type}
name={this.props.name}
id={this.props.id}
onChange={this.props.onChangeHandler} />
<button type="submit">{this.props.buttonText}</button>
</div>
</div>
);
}
}
export default FieldButtonGroup;
我们的React组件将CSS导入到一个JavaScript文件中。编译时, field-button.css 的内容被内联加载。这里有一个可行的方法来使用自定义属性:
.field__button__group label {
display: block;
}
.field__button__group button {
flex: 0 1 10rem;
background-color: var(--button-bg-color, rgb(103, 58, 183)); /* include a default */
color: #fff;
border: none;
}
在该示例中,我们使用自定义属性 --button-bg-color 作为按钮的背景颜色,同时伴随着默认颜色,以防 --button-bg-color 没有定义。在这里,我们可以在全局样式表或通过 style 属性设置 --button-bg-color 的值。
让我们将值设置为React属性。React props (简称为属性)模仿元素属性。它们是一种将数据传入React组件的方式。在本例中,我们将添加一个名为 buttonBgColor 的属性:
import FieldButtonGroup from '../FieldButtonGroup';
class NewsletterSignup extends React.Component {
render() {
// For brevity, we've left out the onChangeHandler prop.
return (
<FieldButtonGroup type="email" name="newsletter" id="newsletter"
labelText="E-mail address" buttonText="Subscribe"
buttonBgColor="rgb(75, 97, 108)" />
);
}
}
export default NewsletterSignup;
现在,我们需要更新 FieldButtonGroup 组件,来支持本次更改:
class FieldButtonGroup extends React.Component {
render() {
/*
In React, the style attribute value must be set using a JavaScript
object in which the object keys are CSS properties. Properties
should either be camelCased (e.g. backgroundColor) or enclosed in
quotes.
*/
const buttonStyle = {
'--button-bg-color': this.props.buttonBgColor
};
return (
<div className="field__button__group">
<label htmlFor={this.props.id}>{this.props.labelText}</label>
<div>
<input type={this.props.type}
name={this.props.name} id={this.props.id}
onChange={this.props.onChangeHandler} />
<button type="submit" style={buttonStyle}>
{this.props.buttonText}
</button>
</div>
</div>
);
}
}
在上述代码中,我们添加了一个 buttonStyle 对象,该对象包含自定义属性的名称,并将其值设置为 buttonBgColor 属性的值,并为按钮添加 style 属性。
使用 style 属性可能与你所学到的关于编写CSS的知识相悖。CSS的一个卖点是,我们可以定义一套样式,在多个HTML和XML文档中使用。另一方面,style属性将CSS的范围限制在它所应用的元素上,导致我们不能重用它。并且也不能利用层叠的优势。
但在一个基于组件的前端架构中,一个组件可能在多种情况下被多个团队使用,甚至可能在客户端项目中共享。在这些情况下,你可能想把层叠的 全局范围 与 style 属性所提供的 局部范围 结合起来。
用 style 属性设置自定义属性值,可以将效果限制在 FieldButtonGroup 组件这个特定实例中。但是,由于我们使用了一个自定义属性而不是标准的CSS属性,我们仍然可以选择在样式表中定义 --button-bg-color ,而不是作为一个组件属性。
自定义属性采用了预处理器的最佳功能之一--变量,并使其成为CSS的原生功能。使用自定义属性,我们可以:
变量有一系列的应用,在基于组件的设计系统中特别有用。我希望你现在对如何在CSS中使用变量或自定义属性有了更好的理解。
以上就是全部内容,如果对你有所帮助,欢迎点赞收藏转发~
原文:https://www.sitepoint.com/how-to-use-variables-in-css/
本文的目的主要是展示CSS变量是如何工作的。随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制。
Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少重复代码,也加快了我们开发速度。
原生css 中变量的使用,这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。声明变量的时候,变量名前面要加两根连词线(--),var()函数用于读取变量。
JavaScript中var、let、const区别?js中let和const都是es5版本新的命名规范,在此之前定定义一个变量只能用var。我们可以把let和const看做是为了弥补var的一些不足而新设计出来的
引擎在读取js代码的过程中,分为两步。第一个步骤是整个js代码的解析读取,第二个步骤是执行。在JS代码执行之前,浏览器的解析器在遇到 var 变量名 和function 整个函数 提升到当前作用域的最前面。
很早直接就了解到CSS变量相关的内容,奈何之前使用价值不高(很多主流浏览器不兼容),最近发现主流浏览器都已经支持了这一变化,CSS变量就像JS的变量,每个类名或者花括号就像一个function,里面的变量只有上下文以内可以获取,这就让CSS有了更多可能性。
var是全局声明,let是块级作用的,只适用于当前代码块;var变量会发生变量提升,let则不会进行变量提升;var 会造成重复赋值,循环里的赋值可能会造成变量泄露至全局
解构赋值官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。变量的解构赋值就是一种写法,掌握了这种写法可以让我们在书写 javascript 代码时可以更加的简单,迅捷。
JS中的变量是保存在栈内存中的:1.基本数据类型的值直接在栈内存中存储;2.值与值之间是独立存在的,修改一个变量不会影响其他变量;对象是保存到堆内存中的,每创建一个新的对象
这篇文章总结七种办法来交换a和b的变量值 。最最最简单的办法就是使用一个临时变量了 ,最后我的方案是利用了ES6的解构赋值语法 ,它允许我们提取数组和对象的值,对变量进行赋值
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!