整潔的可選自定義屬性值技巧

處理多值CSS 屬性（例如transform ）中的可選自定義屬性值，有時需要一些技巧。 假設您有一個元素，其transform屬性包含多個值：

 .el {
  transform: translate(100px) scale(1.5) skew(5deg);
}

如果只想根據需要應用某些轉換值，則可以使用自定義屬性來實現可選性：

 .el {
  /* |-- default ---| |-- optional --| */
  transform: translate(100px) var(--transform);
}

然而，如果--transform未定義，整個transform屬性將失效。 解決方法是使用一個空值作為回退值：

 .el {
  transform: translate(100px) var(--transform, );
}

注意區別？這裡定義了一個空值( , ) 作為回退。 根據規範：

與通常的逗號省略規則（要求在逗號不分隔值時省略）不同，在var()中，一個單獨的逗號（後面沒有任何內容）必須被視為有效，表示一個空的回退值。

這與CSS 自定義屬性切換技巧類似，該技巧利用自定義屬性具有空格值。

演示

此技巧適用於任何多值CSS 屬性。 下面的演示除了transform之外，還使用了text-shadow 、 background和filter 。

對於某些接受多個值的屬性（如text-shadow ），由於它們僅適用於逗號分隔符，因此需要特殊處理。 在這些情況下，當定義CSS 自定義屬性時，您（作為代碼作者）知道它僅在自定義屬性已定義值的上下文中使用。 然後應該在自定義屬性中第一個值之前直接插入逗號，如下所示：

 --text-shadow: ,0 0 5px black;

當然，這會限制在屬性值唯一的情況下使用此變量的能力。 但是，可以通過創建變量的“層”來解決這個問題，即自定義屬性指向更低級別的自定義屬性。

注意Sass 編譯器

在探索此技巧時，我發現Sass 編譯器中存在一個錯誤，它會去除空的回退值( , )，這與規範不符。 我已報告了此錯誤，並希望它很快得到修復。

作為臨時解決方法，可以使用不會導致渲染的回退值，例如：

 transform: translate(100px) var(--transform, scale(1));

以上是整潔的可選自定義屬性值技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！