css中變量
CSS | 變數 (CSS | Variables)
CSS variables allow you to create reusable values that can be used throughout a CSS document.
CSS變量允許您創建可在CSS文檔中使用的可重用值。
In CSS variable, function var() allows CSS variables to be accessed.
在CSS變量中 ，函數var()允許訪問CSS變量。
For example, in CSS it's quite common to reuse a single color or text-size throughout the code, this would mean reusing the same color or text-size value several times throughout a document. With CSS variables the color or text-size value can be assigned to a variable and used in multiple places. This makes changing values easier and is more convenient than using traditional CSS values.
例如 ，在CSS中，在整個代碼中重復使用單一顏色或文本大小是很普遍的，這意味著在整個文檔中多次重復使用相同的顏色或文本大小。 使用CSS變量，可以將顏色或文本大小值分配給變量，并在多個位置使用。 與使用傳統CSS值相比，這使更改值更容易并且更方便。
Note: Variables should be declared in a CSS selector that defines variables scope. In the global scope, you can use either the: root or the body selector.
注意：變量應在定義變量范圍CSS選擇器中聲明。 在全局范圍內，可以使用： root或body選擇器 。
The name of the variable must start with two dashes (--), also the name of the variable is case sensitive.
變量的名稱必須以兩個破折號( - )開頭，并且變量的名稱區分大小寫。
CSS變量| 有效/無效 (CSS variables | Valids/Invalids)
When naming CSS variables, it contains only letters and dashes just like other CSS properties but it should start with double dashes (--).
命名CSS變量時，與其他CSS屬性一樣，它僅包含字母和破折號，但應以雙破折號( - )開頭。
//These are Invalids variable names
--123color: blue;
--#color: red;
--$width: 100px;
//Valid variable names
--color: red;
--bg-color: yellow ;
--width: 100px;
可變屬性 (Variable properties)
Variable color
顏色可變
Variable dimension
可變尺寸
Variable cascading
可變級聯
Let's look at each property more closely...
讓我們更仔細地觀察每個屬性...
a)可變顏色 (a) Variable color)
This property allows us to reuse a single color throughout the code. CSS Variables the color value can be assigned to a variable and used in multiple places.
此屬性使我們可以在整個代碼中重用單一顏色。 CSS變量的顏色值可以分配給一個變量，并可以在多個地方使用。
Syntax:
句法：
Element {
--main-bg-color: coral;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: blue;
}
#div1 {
background-color: var(--primary-color);
padding: 5px;
}
#div2 {
background-color: var(--primary-color);
padding: 10px;
}
#div3 {
background-color: var(--primary-color);
padding: 15px;
}
</style>
</head>
<body>
<div id="div1"> Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
<div id="div3">Variables in CSS.</div>
</body>
</html>
Output
輸出量
In the above example, we have reused blue color in three division element.
在上面的示例中，我們在三個劃分元素中重用了藍色。
b)尺寸可變 (b) Variable dimensions)
This property allows us to reuse a few sets of dimensions throughout the code.
此屬性使我們可以在整個代碼中重用幾組維度。
Syntax:
句法：
Element {
--W200: 200px;
--W10: 10px;
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--W200: 200px;
--W10: 10px;
}
#div1 {
width: var(--W200);
margin: var(--W10);
padding: 5px;
}
#div2 {
width: var(--W200);
margin: var(--W10);
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
</body>
</html>
Output
輸出量
In the above example, the same dimensions are used in both the divisions.
在上面的示例中，兩個分區使用相同的尺寸。
c)可變級聯 (c) Variable cascading)
Variables in CSS cascade in the same way as other properties, and can be reused safely.
CSS中的變量以與其他屬性相同的方式級聯，并且可以安全地重用。
You can define variables multiple times and only the definition with the highest specificity will apply to the element selected.
您可以多次定義變量，并且只有具有最高特異性的定義才適用于所選元素。
Syntax:
句法：
Element {
--color: green;
border: 1px solid var(--color);
}
Example:
例：
<!DOCTYPE html>
<html>
<head>
<style>
.button {
--color: green;
border: 1px solid var(--color);
color: var(--color);
}
.button:hover {
--color: blue;
}
.button_red {
--color: red;
}
</style>
</head>
<body>
<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>
</body>
</html>
Output
輸出量
In the above example, if we hover over the last button the color changes to blue.
在上面的示例中，如果將鼠標懸停在最后一個按鈕上，顏色將變為藍色。
翻譯自: https://www.includehelp.com/code-snippets/variables-in-css.aspx
css中變量
 但是 3.28.4-0ubuntu18.04.2 正要被安裝解決方案)
