在CSS上戳if（）功能更多：有條件的顏色主題

Chrome 137運送了IF（）CSS函數，因此我們完全有可能看到其他瀏覽器實現它，儘管很難確切知道何時。無論如何，如果（）使我們能夠有條件地使用值，那麼我們可以使用查詢和其他功能（例如，媒體查詢和燈 - dark（）函數），所以我敢肯定，您想知道：如果（）可以做什麼？

Sunkanmi昨天對該功能進行了很好的概述，在高水平的語法上戳了一下。我想在本文中更加努力地戳它，從而涉及一些現實的用法。

回顧一下，如果（）根據CSS變量的值有條件地將值分配給屬性。例如，我們可以根據 - theme的值為顏色和背景屬性分配不同的值：

• - 感謝：“三葉草”
  • 顏色：‌HSL（146 50％3％）
  • 背景：HSL（146 50％40％）
• - 絲毫：其他
  • 顏色：HSL（43 74％3％）
  • 背景：HSL（43 74％64％）

 ：根 {
  / *更改為“其他”值 */
   - 愛：“三葉草”；

  身體 {
    顏色：if（style（ - 主題：“ shamrock”）：HSL（146 50％3％）; else：HSL（43 74％3％））;
    背景：if（style（ - 主題：“ shamrock”）：HSL（146 50％40％）; else：HSL（43 74％64％））;
  }
}

我不喜歡語法（太多的結腸，括號等），但是我們可以這樣格式化（我認為這有點清楚）：

顏色：if（（（
  樣式（ - 主題：“三葉草”）：HSL（146 50％3％）；
  else：HSL（43 74％3％）
）；

我們應該能夠用if（）做瘋狂的事情，我希望最終成為這種情況，但是我進行了一些測試，並了解到上面的語法是唯一有效的語法。我們無法基於普通CSS屬性（而不是自定義屬性），HTML屬性（使用attr（））或任何其他值的條件。至少目前，條件必須基於自定義屬性的值（CSS變量）。

探索我們可以處理的if（）

從第一個示例來看，很明顯，我們可以將if（）用於主題（以及整體設計系統）。雖然我們可以利用Light-Dark（）函數，但是如果主題不是嚴格的光和黑暗，或者如果我們想為每個主題擁有兩個以上的主題或輕度和深色模式怎麼辦？好吧，這就是IF（）可以使用的。

首先，讓我們創建更多主題/更多條件：

 ：根 {
  /*三葉草|藏紅花|紫水晶 */
   - 這些：“藏紅花”； /* ...我選擇你！ */

  身體 {
    顏色：if（（（
      樣式（ - 主題：“三葉草”）：HSL（146 50％3％）；
      樣式（ - 主題：“藏紅花”）：HSL（43 74％3％）;
      樣式（ - 主題：“紫水晶”）：HSL（282 47％3％）
    ）；
    背景：if（（
      樣式（ - 主題：“三葉草”）：HSL（146 50％40％）；
      樣式（ - 主題：“藏紅花”）：HSL（43 74％64％）;
      樣式（ - 主題：“紫水晶”）：HSL（282 47％56％）
    ）；
    過渡：300ms；
  }
}

真的很簡單，但是有一些易於失踪的東西。首先，這次沒有“其他條件”，這意味著如果主題不是三葉草，藏紅花或紫水晶，則使用默認的瀏覽器樣式。否則，if（）函數可以解決第一個真實語句的價值，即在這種情況下，這是藏紅花主題。其次，過渡起來有效。在下面的演示中，我添加了一個用戶界面，用於切換-theme，並且為了過渡，實際上只是過渡：與IF（）函數旁邊的300ms：300ms：

注意：如果主題匯總是用戶控制的，例如選擇一個選項，則實際上您根本不需要（）。您可以使用我在演示開頭使用的邏輯（：root：has has（#shamrock：chepled）{ / * styles * /}）。 Amit Sheen在Smashing Magazine上進行了出色的示範。

但是，為了使代碼更加可維護，我們也可以將顏色滑入CSS變量中，然後在if（）函數中使用它們，然後將if（）自身滑入CSS變量：

 /* 設定 */
：根 {
  /*三葉草|藏紅花|紫水晶 */
   - 愛：“三葉草”； /* ...我選擇你！ */

  / *基礎顏色 */
  -shamrock：HSL（146 50％40％）；
  -Saffron：HSL（43 74％64％）；
  -Amethyst：HSL（282 47％56％）；

  / *基本顏色，但以3％的輕度 */
   -  ShamRock融合：HSL（來自Var（-shamrock）HS 3％）；
   - 輔助負數：HSL（來自var（-saffron）HS 3％）;
   - 甲基水平：HSL（來自var（ - 紫水晶）HS 3％）；

   - 背景：if（（
    樣式（ - 主題：“ shamrock”）：var（-shamrock）;
    樣式（ - 主題：“藏紅花”）：var（-saffron）;
    樣式（ - 主題：“紫水晶”）：var（ - 紫水晶）
  ）；

   - 顏色：if（（
    樣式（ - 主題：“ shamrock”）：var（ - 三葉草融合）;
    樣式（ - 主題：“藏紅花”）：var（-saffron-complementary）;
    樣式（ - 主題：“紫水晶”）：var（ - 紫水晶融合）
  ）；

  /* 用法 */
  身體 {
    /*一個變量，所有IF！ */
    背景：var（ - 背景）;
    顏色：var（ - 顏色）;
    重音色：var（ - 顏色）;

    /*不能忘記這個！ */
    過渡：300ms；
  }
}

除了在if（）函數中使用CSS變量外，我們還可以嵌套其他功能。在下面的示例中，我在其中拋出了燈光（），它基本上將顏色扭轉了黑暗模式：

 - 背景：if（（
  樣式（ - 主題：“ shamrock”）：淺黑色（var（-shamrock），var（-shamrock complementary））;
  樣式（ - 主題：“藏紅花”）：淺色（var（-saffron），var（-saffron-complementary））;
  樣式（ - 主題：“紫水晶”）：淺黑色（var（ - 紫水晶），var（ - 紫水胺型融合））
）；

如果（）與容器樣式查詢

如果您以前從未使用過容器樣式查詢，則基本上會檢查一個容器是否具有某個CSS變量（非常類似於IF（）函數）。這是完全相同的示例/演示，但是使用容器樣式查詢而不是IF（）函數：

 ：根 {
  /*三葉草|藏紅花|紫水晶 */
   - 愛：“三葉草”； /* ...我選擇你！ */

  -shamrock：HSL（146 50％40％）；
  -Saffron：HSL（43 74％64％）；
  -Amethyst：HSL（282 47％56％）；

   -  ShamRock融合：HSL（來自Var（-shamrock）HS 3％）；
   - 輔助負數：HSL（來自var（-saffron）HS 3％）;
   - 甲基水平：HSL（來自var（ - 紫水晶）HS 3％）；

  身體 {
    /*容器選擇了三葉草！ */
    @Container樣式（ - 主題：“ Shamrock”）{
       - 背景：淺黑色（var（-shamrock），var（-shamrock-complementary））;
       - 顏色：淺黑色（var（-shamrock complementary），var（-shamrock））;
    }

    @Container樣式（ - 主題：“ saffron”）{
       - 背景：淺黑色（var（-saffron），var（-saffron-complementary））;
       - 顏色：淺黑色（var（ - 藏紅花融合），var（-saffron））;
    }

    @Container樣式（ - 主題：“紫水晶”）{
       - 背景：淺黑色（var（ - 紫水晶），var（ - 紫水胺型平衡））;
       - 顏色：淺黑色（var（ - 紫水晶融合），var（ - 紫水晶））;
    }

    背景：var（ - 背景）;
    顏色：var（ - 顏色）;
    重音色：var（ - 顏色）;
    過渡：300ms；
  }
}

如您所見，if（）促進有條件的值，容器樣式查詢有助於條件屬性和值。除此之外，它確實只是另一種語法。

如果（）（但可能沒有意識到），您可以做的其他事情

檢查CSS變量是否存在：

 / *隱藏圖標如果未設置變量 */
.圖示 {
  顯示：if（（
    樣式（ - 偶像家庭）：內聯塊；
    否則：沒有
  ）；
}

創建更複雜的條件語句：

 H1 {
  字體大小：if（（
    樣式（ - 較大的頭腦：true）：xxx-large;
    樣式（ - 主題：“ thewithlargerheadings”）：xxx-large
  ）；
}

檢查兩個CSS變量是否匹配：

 / *如果＃S2具有與＃S1相同的背景，請添加邊框 */
＃s2 {
  邊界頂：if（（
    樣式（-S2-Background：var（-s1-background））：薄固體紅色
  ）；
}

if（）和calc（）：當數學不是數學時

這行不通（也許有人可以幫助我指出原因）：

 div {
  / * 3/3 = 1 */
  -CALC：calc（3/3）;
  / *藍色，因為如果（）無法計算-CALC */
  背景：if（style（ -  calc：1）：紅色； else：blue）;
}

要製作if（）計算-CALC，我們需要首先使用@property註冊CSS變量，例如：

 @property -calc {
  文法:"<number> ”
  初始值：0;
  繼承：false;
}</number>

結束思想

儘管我不喜歡語法，並且有時看起來不可讀（尤其是在一行上格式化），但我很高興看到IF（）如何發展。我很想能夠與普通屬性一起使用（例如，顏色：if（style（背景：白色）：黑色； style（背景：black）：white）：white）;）避免在可能的情況下設置CSS變量。

如果可以即時計算Calc（）計算而無需註冊變量，那也很棒。

話雖這麼說，我仍然對IF（）當前的功能非常滿意，並且迫不及待地想構建更簡單的設計系統。

以上是在CSS上戳if（）功能更多：有條件的顏色主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！