CSS是前端設計中最重要的一部分，其中設置變量是CSS開發的重要一環，讓我們一起了解一下。 CSS中設置變量使用var關鍵字，變量的命名規則為"--" + 名稱，例如--font-color，--border-color等。我們可以在任何CSS屬性值中使用這些變量，比如 ```pre p { color: var(--font-color); border: 1px solid var(--border-color); } ``` 在上述代碼中，我們使用了兩個自定義變量--font-color和--border-color來定義p標簽的文字顏色和邊框顏色。 我們可以通過以下方式定義變量的值 ```pre :root { --font-color: #333333; --border-color: #dddddd; } ``` 在上述代碼中，我們使用:root偽類來定義變量的值，這樣所有樣式中都可以使用這些變量。 另外，我們可以使用calc()函數和其他CSS函數和值來操作變量，例如： ```pre p { font-size: calc(var(--font-size) + 2px); box-shadow: 0 0 10px rgba(0, 0, 0, var(--shadow-opacity)); } ``` 在上述代碼中，我們使用calc()函數來計算font-size的值，并使用rgba()函數和變量作為box-shadow的顏色。 總結一下，CSS中設置變量是CSS開發中非常有用的一環，允許我們輕松地管理和修改CSS的值。通過使用var關鍵字和定義變量的值，我們可以將樣式組織得更加清晰，更加易于維護。