整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS 变量（正式术语称为 CSS 自定义属性），其行为与其他编程语言中的变量非常相似。可以用来将 CSS 文档中那些重复的特定值命名为变量。CSS 变量以两个破折号（--）为前缀（例如--my-color: black）来定义变量。
要访问变量，您可以使用该var()函数（例如color: var(--my-color)）。CSS 变量对于在不同元素和组件之间共享样式非常有用。
最常见的用例之一是制作网站主题。CSS 变量在整个网站上创建公共的主题，并轻松将其换成不同的主题。这通常是将一个类应用于一个共同的祖先元素（例如<body>元素）来实现的。此示例演示了:root根元素中定义的全局变量，然后再body元素从其父级继承值：
/* 在根元素上定义公共的主题变量*/
:root {
--bg-color: #fff;
--main-color: #000;
--secondary-color: #222;
}
/*在body元素上使用这些变量 */
body {
background-color: var(--bg-color);
color: var(--main-color);
}
small {
color: var(--secondary-color);
}
/* 定义另一个暗黑主题，可以覆盖默认主题*/
body.dark {
--bg-color: #080808;
--main-color: #fff;
--secondary-color: #ccc;
}另一个示例，在制作组件时定义不同的样式，比如下面按钮组件：
.btn {
--bg-color: #002299;
--text-color: #fff;
--highlight-color: #669900;
background-color: var(--bg-color);
color: var(--text-color);
}
/* .btn 按钮子元素使用 --highlight-color 颜色 */
.btn .highlight {
color: var(--highlight-color);
}
/* 定义警告按钮的样式， 覆盖默认变量 */
.btn-danger {
--bg-color: #dd4a68;
--text-color: #000;
--highlight-color: #990055;
}最后，请记住在使用 CSS 变量时要注意事项：
篇文章是阮一峰老师发表于2017年（《CSS 变量教程 - 阮一峰的网络日志），虽然以及过去6年有余，但至今读来依然非常棒，今天搜索一个css变量相关的知识再次读到，分享在这里，大家一起学习下，也推荐大家经常去读一读阮老师的分享！
声明变量的时候，变量名前面要加两根连词线（--）。
body {
--foo: #7F583F;
--bar: #F7EFD2;
}上面代码中，body选择器里面声明了两个变量：--foo和--bar。
它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。
你可能会问，为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
各种值都可以放入 CSS 变量。
:root{
--main-color: #4d4e53;
--main-bg: rgb(255, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
var()函数用于读取变量。
a {
color: var(--foo);
text-decoration-color: var(--bar);
}var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--foo, #7F583F);第二个参数不处理内部的逗号或空格，都视作参数的一部分。
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);var()函数还可以用在变量的声明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}注意，变量值只能用作属性值，不能用作属性名。
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}上面代码中，变量--side用作属性名，这是无效的。
如果变量值是一个字符串，可以与其他字符串拼接。
--bar: 'hello';
--foo: var(--bar)' world';利用这一点，可以 debug（例子）。
body:after {
content: '--screen-category : 'var(--screen-category);
}如果变量值是数值，不能与数值单位直接连用。
.foo {
--gap: 20;
/* 无效 */ margin-top: var(--gap)px;
}上面代码中，数值与单位直接写在一起，这是无效的。必须使用calc()函数，将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}如果变量值带有单位，就不能写成字符串。
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);
}同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与 CSS 的"层叠"（cascade）规则是一致的。
下面是一个例子。
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
这就是说，变量的作用域就是它所在的选择器的有效范围。
body {
--foo: #7F583F;
}
.content {
--bar: #F7EFD2;
}上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。
由于这个原因，全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们。
:root { --main-color: #06c; }CSS 是动态的，页面的任何变化，都会导致采用的规则变化。
利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值。
body {
--primary: #7F583F;
--secondary: #F7EFD2;
}
a {
color: var(--primary);
text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
body {
--primary: #F7EFD2;
--secondary: #7F583F;
}
}对于不支持 CSS 变量的浏览器，可以采用下面的写法。
a {
color: #7F583F;
color: var(--primary);
}也可以使用@support命令进行检测。
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}JavaScript 也可以检测浏览器是否支持 CSS 变量。
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
if (isSupported) {
/* supported */
} else {
/* not supported */
}JavaScript 操作 CSS 变量的写法如下。
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。
const docStyle = document.documentElement.style;
document.addEventListener('mousemove', (e) => {
docStyle.setProperty('--mouse-x', e.clientX);
docStyle.setProperty('--mouse-y', e.clientY);
});那些对 CSS 无用的信息，也可以放入 CSS 变量。
--foo: if(x > 5) this.width = 10;上面代码中，--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取。
所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。
原文地址：《CSS 变量教程》 作者： 阮一峰 日期： 2017年5月 9日 https://www.ruanyifeng.com/blog/2017/05/css-variables.html
家好，在本篇文章中，我们将深入了解JavaScript变量的方方面面。无论你是初学者还是有一定经验的开发者，本文都将为你揭开JavaScript变量的奥秘，让你轻松掌握这门重要的编程语言。
在JavaScript中，变量是存储数据的容器，它们允许你在程序中存储和操作各种类型的值。使用变量可以使你的代码更加灵活和可维护，因为你可以在程序中多次使用同一个值，而不需要重复输入。通俗的理解变量就是使用【特定符号】来代表【特定数据】。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
</head>
<body>
<script>
x = 1
y = 2
// x和y两个符号分别表示了数字1和2
//举例：使用变量记录数据
// 将用户输入的内容保存在 num 这个变量（容器）中
num = prompt('请输入一数字!')
// 通过 num 变量（容器）将用户输入的内容输出出来
alert(num)
document.write(num)
</script>
</body>
</html>要使用变量，首先需要声明它。在JavaScript中，有三种声明变量的方式：使用var、let和const关键字。这些关键字的选择取决于变量的作用域和是否允许重新赋值。
关键字也叫保留字，是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义。以下是JavaScript常见的一些关键字。
case else new var
catch export return void
class extends super while
const finally switch with
continue for this yield
debugger function throw
default if try
enum await implements protected
interface public package static
import from as
这些关键字在JavaScript的语法中有特定的用途，例如：
声明变量：关键字+变量名
赋值：变量名 = XX数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量声明和赋值</title>
</head>
<body>
<script>
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
// 赋值，将 25 这个数据存入了 age 这个“容器”中
age = 25
// 这样 age 的值就成了 25
document.write(age)
// 也可以声明和赋值同时进行
let str = '你好，谧夜星球！'
alert(str);
</script>
</body>
</html>作用域：
变量提升：
变量重复声明：
可变性：
全局对象属性：
初始化：
适用场景：
综上所述，let 和 const 是在现代 JavaScript 中更常见和推荐的变量声明方式，可以更好地控制作用域、避免一些潜在问题，并提高代码的可读性和可维护性。
在命名变量时，需要遵循一些规则：
变量的作用域指的是变量在代码中的可访问范围。JavaScript中有两种主要的作用域：全局作用域和局部作用域。
概念：使用 const 声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
命名规范：和变量一致
const PI = 3.14注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
本文深入介绍了JavaScript变量的各个方面，从声明变量到变量的作用域、命名规则以及使用方法等。通过学习这些基础知识，你将能够更好地理解和运用JavaScript变量，为你的编程之路铺平道路。
希望本文能够帮助你更深入地理解JavaScript变量，让你在编程的旅程中游刃有余。如果你有任何关于JavaScript变量的疑问，欢迎在评论区提出，我将竭诚为你解答！
感谢阅读本文，希望能够对你有所帮助。记得点赞、分享！持续更新中！
*请认真填写需求信息，我们会在24小时内与您取得联系。
