CSS 變數可以模仿 Sass 的「darken()」函數來產生顏色陰影嗎？

使用CSS 變數產生顏色陰影：一種系統方法

問題

我們能否使用CSS 變數來模仿Sass 的darken() 函數的功能產生定義顏色的陰影？

使用相對顏色的方法語法

CSS 引入了“相對顏色語法”，它可以實現以下功能：

:root {
  --color-primary: #f00;
  --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));
}

其工作原理如下：

• --color-primary: 定義基色。
• --color-primary-darker：使用使基色變暗 5% hsl().
• --color-primary-darkest: 使用 hsl() 將基色變暗 10%。

用法

使用這些變數樣式元素：

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

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

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

這種方法可讓您動態定義色調，而無需修改顏色可變，以三種色調達到想要的漸層效果。

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