CSS自定義屬性的範圍的功率（和樂趣）

CSS自定義屬性（變量）通常會忽略強大的範圍範圍。本文探討瞭如何利用這種力量來進行高效和動態的樣式。

雖然您可能熟悉基本CSS變量用法（例如--size: 1em; font-size: var(--size); ），但它們的全部潛在潛力在於他們的範圍能力。這允許大幅減少代碼和更容易的維護。

讓我們檢查實際應用：

示範樣式：一個按鈕示例

考慮造型初級和輔助按鈕。傳統方法可能涉及每種按鈕類型及其各種狀態（懸停，活動）的單獨樣式。這導致重複代碼。

使用示波器變量，我們可以定義基本按鈕樣式，然後僅改變不同按鈕類型的色調：

 。按鈕 {
  填充：1REM 1.25REM;
  顏色：#fff;
  字體重量：大膽；
  字體大小：1.25REM;
  保證金：1REM；
  過渡：背景0.1s易於；
  背景：HSL（var（-hue），100％，50％）；
  輪廓顏色：HSL（var（-hue），100％，80％）;
}
。 }
.button：Active {背景：HSL（var（-hue），100％，30％）; }

.button- primary { -  -hue：233; }
。 }

這大大減少了代碼並簡化了維護。更改基礎.button丁頓風格會自動更新所有變體。此外，您可以直接在HTML中嵌入變量，以獲得更大的靈活性：

<button class="button" style="--hue: 20;">覆蓋</button>

帶有內聯變量的動態動畫

例如，將自定義屬性與動態生成相結合時，真正的功能會閃耀，例如，使用Pug或JavaScript等模板引擎。這允許隨機內聯變量分配，為每個元素創建唯一的動畫。

示例：一個“激動”按鈕

讓我們創建一個按鈕，該按鈕巧妙地漂浮，然後在懸停在懸停的情況下“搖動”。我們沒有為每個動畫定義單獨的密鑰幀，而是使用變量來控制單個密鑰幀中的動畫行為：

 。按鈕 {
   -  Y：-25; -X：0; - 旋轉：0; - 速度：2;
  動畫：流動和振動計算（var（ - 速度） * 1s）無限易於插入；
}

.button：懸停{-speed：.1; -X：1; -y：-1; - 旋轉：-1; }

@keyframes flow and shake {
  0％，100％{轉換：translate（calc（var（-x） * -1％），calc（var（-y） * -1％））旋轉（calc（var（var（ -  rotation） * -1deg）））; }
  50％{轉換：轉換（calc（var（-x） * 1％），calc（var（-y） * 1％））旋轉（calc（calc（var（-otation） * 1deg）））; }
}

這種方法大大減少了所需的關鍵幀定義數量，從而導致更清潔，更可維護的代碼。

示例：隨機氣泡

在此基礎上，我們可以創建一個帶有多個動畫氣泡的場景，每個場景都有隨機屬性（大小，位置，動畫速度等）都通過示波器CSS變量來控制。這展示了將可變範圍與動態內容產生結合的功能。

總而言之，有效地利用CSS自定義屬性及其範圍功能，可以創建具有較少代碼的動態和復雜樣式，從而提高可維護性和效率。提供的示例演示瞭如何為靜態和動畫元素實現這一目標。

以上是CSS自定義屬性的範圍的功率（和樂趣）的詳細內容。更多資訊請關注PHP中文網其他相關文章！