整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
