在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中文网其他相关文章！