标签：Windi 定义 样式 新星 css 使用 CSS

CSS 框架的新星——Windi CSS

什么是Windi CSS？

Windi CSS 是一款帮助您轻松便捷地处理 css 样式的工具。在本文中，您将了解 Windi CSS 的概念、Windi CSS 的特性以及最重要的部分——如何使用 Windi CSS。

先验知识

在使用 Windi 之前，你必须知道一种叫做 css 的方法 原子 CSS .的定义 原子 CSS 在 让我们准确定义什么是原子 CSS ：

原子 CSS 是一种 CSS 架构方法，它支持小型、单一用途的类，其名称基于视觉功能。

例如，如果我将这个类名传递给标签：

将在 css 代码中生成什么：

Atomic CSS 的核心价值是 “在单一课程中定义单一目的” .如您所见，“text-xl”类只定义了文本的大小。 Atomic CSS 概念中的任何其他类也可以这样工作。如果要在此标记上采用另一种 css 样式，请添加另一个以其样式内容命名的类。

通过这种方法，我们可以通过简单地添加几个单词来定义标签的视觉风格。我们不必想出一个类名并在 css/scss 文件中定义这个类的样式。此外，由于样式定义是分开的，因此很容易检查或修改标签的样式，而不必担心影响项目的其他部分！ 原子 CSS 处理 css 样式是一个很好的实践，Windi CSS 为我们提供了一种补充这个概念的方法。

主要特征

1. 价值自动推断

使用 Windi 定义的类名并生成相应的样式。

通过使用 Windi 定义的这些类名，Windi 将自动推断特定样式定义到此标记中。也就是说，您不必自己定义类。您可以在 windic 文档（实用程序部分）中搜索任意值。

2. 捷径

快速组合实用程序以创建可重用的组件。快捷方式可以导入其他快捷方式。

在windi config中，定义快捷方式：

在标签中，您可以调用这些快捷方式来推断实用程序：

3.自定义价值

在windi config中，定义自定义值，如颜色、字体等。

在标签中使用这些值：

关于 Windi 的颜色模块，请参考 https://windicss.org/utilities/general/colors.htm .

4. 变体组

定义组中变体的实用程序。此功能主要用于悬停变体。

5. 其他

主要特征在上一段中提到。还有许多其他很酷的功能供您发现 https://windicss.org/features/ .有人可能想知道 Tailwind CSS 和 Windi CSS 有什么区别。这些与 Tailwind 不同的实验性功能是您应该考虑的事情。

对于 Windi 扩展： https://windicss.org/plugins/interfaces.html

使用建议

不仅限于在单个项目中使用单个 css 框架。 Windi 可以与其他 css 工具配合使用。例如，Windi 与 scss 合作可以非常强大。也一样 原子 CSS ，这并不意味着您必须在一个项目中坚持一种 css 方法。更好的方法是在代码的每个部分应用适当的做法。

在大多数情况下，我们可以顺利使用 Windi。下面是使用 Windi 前后的示例代码。

原始代码：

使用 Windi CSS 后：

代码变得非常简单且易于管理。我们不必再担心如何命名类了。此外，我们可以通过直接查看标签来查看和修改样式。

然而 , 还有一些条件使用 Windi 不是一个好主意。例如，当涉及到动态访问的类（ES6 语法和 vue）时，Windi 可能不适合这种情况。

原始代码（ 类型 是一个字符串变量）：

Note that &- is the syntax of scss

使用 Windi CSS 后：

vue 文件中会产生大量冗余和重用的代码，因为我们必须使用windi 语法指定每种类型的按钮。在这种情况下，使用 scss 和动态访问的类可能更舒服。

综上所述，Windi CSS 在处理 css 时给了我们方便。 Windi 很有可能成为下一代 css 框架。同时，这并不意味着我们要丢弃其他工具。 Windi CSS 的存在让我们有更多的可能以方便的方式使用多种 css 工具开发我们的项目。

希望你喜欢这篇文章。谢谢！

关注我，了解更多编程技术知识。

参考：

让我们准确定义什么是原子 CSS

浅谈Atomic CSS 的发展背景与Tailwind CSS

主页 |温迪 CSS

重新构想原子 CSS

Windi CSS — Tailwind CSS 的上位替代

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/17446/11150600

标签：Windi,定义,样式,新星,css,使用,CSS
来源： https://www.cnblogs.com/amboke/p/16660199.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。