CSS自定义属性的范围的功率（和乐趣）

CSS自定义属性（变量）通常会忽略强大的范围范围。本文探讨了如何利用这种力量来进行高效和动态的样式。

虽然您可能熟悉基本CSS变量用法（例如--size: 1em; font-size: var(--size); ），但它们的全部潜在潜力在于他们的范围能力。这允许大幅减少代码和更容易的维护。

让我们检查实际应用：

示范样式：一个按钮示例

考虑造型初级和辅助按钮。传统方法可能涉及每种按钮类型及其各种状态（悬停，活动）的单独样式。这导致重复代码。

使用示波器变量，我们可以定义基本按钮样式，然后仅改变不同按钮类型的色调：

 。按钮 {
  填充：1REM 1.25REM;
  颜色：#fff;
  字体重量：大胆；
  字体大小：1.25REM;
  保证金：1REM；
  过渡：背景0.1s易于；
  背景：HSL（var（-hue），100％，50％）；
  轮廓颜色：HSL（var（-hue），100％，80％）;
}
。 }
.button：Active {背景：HSL（var（-hue），100％，30％）; }

.button- primary { -  -hue：233; }
。 }

这大大减少了代码并简化了维护。更改基础.button丁顿风格会自动更新所有变体。此外，您可以直接在HTML中嵌入变量，以获得更大的灵活性：

<button class="button" style="--hue: 20;">覆盖</button>

带有内联变量的动态动画

例如，将自定义属性与动态生成相结合时，真正的功能会闪耀，例如，使用Pug或JavaScript等模板引擎。这允许随机内联变量分配，为每个元素创建唯一的动画。

示例：一个“激动”按钮

让我们创建一个按钮，该按钮巧妙地漂浮，然后在悬停在悬停的情况下“摇动”。我们没有为每个动画定义单独的密钥帧，而是使用变量来控制单个密钥帧中的动画行为：

 。按钮 {
   -  Y：-25; -X：0; - 旋转：0; - 速度：2;
  动画：流动和振动计算（var（ - 速度） * 1s）无限易于插入；
}

.button：悬停{-speed：.1; -X：1; -y：-1; - 旋转：-1; }

@keyframes flow and shake {
  0％，100％{转换：translate（calc（var（-x） * -1％），calc（var（-y） * -1％））旋转（calc（var（var（ -  rotation） * -1deg）））; }
  50％{转换：转换（calc（var（-x） * 1％），calc（var（-y） * 1％））旋转（calc（calc（var（-otation） * 1deg）））; }
}

这种方法大大减少了所需的关键帧定义数量，从而导致更清洁，更可维护的代码。

示例：随机气泡

在此基础上，我们可以创建一个带有多个动画气泡的场景，每个场景都有随机属性（大小，位置，动画速度等）都通过示波器CSS变量来控制。这展示了将可变范围与动态内容产生结合的功能。

总而言之，有效地利用CSS自定义属性及其范围功能，可以创建具有较少代码的动态和复杂样式，从而提高可维护性和效率。提供的示例演示了如何为静态和动画元素实现这一目标。

以上是CSS自定义属性的范围的功率（和乐趣）的详细内容。更多信息请关注PHP中文网其他相关文章！