使用自定义 CSS 变量及其好处

淩亂°似流年 2023-10-14 19:41 9阅读 0赞

构建应用程序的一个重要部分是使其美观且赏心悦目。这确保用户可以轻松地浏览应用程序，并且总体上可以愉快地查看内容。

需要解决的问题  
使用 CSS 设计应用程序的一个常见问题是有很多方法可以指定事物。

尺寸  
例如，我们可以使用 px、em、rem 和 % 来寻址大小。如果我们不小心，我们最终会得到一些文本的 px 和其他文本的 em 。当我们嵌套 div 时，我们也可能有无法控制的 em 大小！

颜色  
在创建应用程序时，我们选择使用的颜色将对整体主题以及用户查看内容时的体验产生很大影响。选择正确的颜色组非常重要，保持颜色一致更重要。

这给我们带来了 CSS 主题的主题。主题本质上意味着在整个样式表中使用一组可重用的值，提供灵活性、可维护性和一致性。它不仅使我们的应用程序看起来干净且经过精心设计，还使管理新更改变得更加容易并且更加动态。

创建 CSS 变量  
要创建 CSS 变量，我们只需使用以下代码

:root {
        
    /* Colors */
    --background-color: #5C6F68,
    --primary-color: #A4F9C8,
    --secondary-color: #A7FFF6,
    --tertiary-color: #95D9C3,
    
    /* Sizes */
    --s1: 12px,
    --s2: 16px,
    --s3: 20px,
    --s4: 32px,
    --s5: 48px
    }

通过这些 CSS 变量设置，我们现在能够坚持一组标准化的颜色和字体。要访问变量，我们所要做的就是在需要时从其他地方调用这些变量。例如，

<body>
        <h1> Hello </h1>
        <p> Hello World </p>
    </body>
    
    /* css */
    h1 {
        
        color: var(--primary-color);
        font-size: var(--s4);
    }
    
    p {
        
        color: var(--secondary-color);
        font-size: var(--s2);
    }

通过使用 CSS 变量，我们的 css 代码将看起来非常整洁且易于阅读。对于更大的 CSS 文件，如果我们决定更改配色方案，则使用 CSS 变量将允许我们更改应用程序的整个主题。此类用例的一个示例是某些应用程序的暗模式功能，其中切换将更改所有组件的整体配色方案。

其他 CSS 变量提示  
当使用 CSS 进行样式设计时，我们经常会遇到视口大小的问题，这可能会破坏或扭曲组件的内容。我学到的一个有助于缓解这些问题的策略是CSS中的clamp()方法。夹紧方法接受三个参数clamp（最小值、首选值、最大值）。这允许我们的内容的大小根据视口的大小动态变化，这可以帮助我们编写更少的媒体查询代码，并最终使我们的应用程序看起来更加一致。

Utopia 的类型计算器是我们可以用来创建这些自定义 CSS 字体大小变量的快速而简单的工具。（https://utopia.fyi/type/calculator）

单击链接，我们将能够指定最小和最大视口大小，以及我们想要的字体大小的步长。Utopia 将生成一段 CSS 代码，我们可以简单地将其复制并粘贴到 CSS :root 中。

确保选中“使用夹具”框！

有了这个，我们现在有了一组精选的字体大小 CSS 变量，可以在我们的任何项目中使用！

好处！  
如果这个简单的过程还没有说服您使用自定义 CSS 变量，这里有一个列表，重申了它们的用途：

主题和品牌  
响应式设计  
一致的设计语言  
动态风格  
媒体查询  
无障碍  
暗/亮模式  
范围样式  
易于维护  
网格和弹性框布局  
可重复使用的组件  
调试和定制  
希望本教程对您创建更动态、更简洁的 CSS 代码有所帮助。感谢您阅读我的博客文章！