如何僅使用 CSS 變數來建立像 Sass 的「darken()」函數一樣的 CSS 顏色陰影？

使用CSS 變量創建顏色陰影：模擬Sass 的Darken() 函數

問題陳述：

創建動態顏色陰影以類似Sass 的方式使用CSS 變數來實現懸停、焦點和活動狀態darken() 函數。

解決方案：

CSS 顏色模組級別 4 規範引入了“相對顏色語法”，它可以使用算術運算來操作顏色。這允許創建如下顏色陰影：

:root {
  --color-primary: #f00; /* any format you want here */
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

在此程式碼中：

• var(--color-primary) 是原始顏色。
• --color-primary-darker 比深5% --color-primary.
• --color-primary-darkest 比--color-primary.

透過調整calc() 表達式中的百分比，您可以產生各種色調的基底色。這種方法提供了與 Sass 的 darken() 函數類似的功能，但使用純 CSS 語法。

以上是如何僅使用 CSS 變數來建立像 Sass 的「darken()」函數一樣的 CSS 顏色陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！