如何使用 Sass 的「darken()」函數等變數產生 CSS 顏色陰影？

使用CSS 變數建立顏色陰影（如Sass 的darken() 函數）

在CSS 中，可以定義原色變數並自動產生懸停、焦點和活動狀態的陰影。操作方法如下：

定義主色變數：

:root {
  --color-primary: #f00;
}

使用相對色彩語法讓主色變暗：

CSS 規範引入了“相對顏色語法”，它允許我們使用方程式來操縱顏色。將主色調暗5%：

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

同樣，要將主色調暗10%：

--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);
}

透過將原色定義為變量，我們現在可以輕鬆修改它並自動生成各種狀態的陰影。與使用單獨的顏色類別相比，這種方法提供了一種更可維護且更有效的方式來創建顏色變化。

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