Tailwind、Bootstrap和其他CSS框架都很棒。它们能帮助你快速完成工作，而且所有这些--但这些框架在定制和可扩展性方面也很有限。
以Tailwind为例，你只能使用其团队创建的实用类来控制元素的边距和填充。虽然他们可能为常见的情况策划了一个巨大的列表，但仍有一些场合，你想定义一个自定义的值，在这样的情况下，你需要通过额外的步骤，为这个元素创建一个外部样式。
另外，几乎所有这些框架在出厂时都有数百个类，而你在项目中可能不会用到这些类，这不仅会对你的网页加载时间产生负面影响，还会影响你作为一个开发者的工作效率，因为你必须学习数百个类。
Assembler CSS可以解决这个问题。
什么是Assembler CSS？
Assembler的文档将其描述为 "一个现代的UI框架，设计成在桌面和移动设备上都有很高的性能，同时提供了一个静态CSS框架难以比拟的全部功能"。
Assembler CSS是。
- 易于学习
- 速度快，性能高
- 重量轻--大小为~8kB（gzip）。
- 可扩展性--你可以很容易地将Assembler CSS与其他CSS框架结合起来。
在本教程中，我们将探讨如何在你的项目中开始使用Assembler CSS，以及这个框架提供的功能。
安装
开始实施Assembler CSS的一个最简单的方法是在你的网页标记中的head 部分包含其CDN，如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://unpkg.com/@asmcss/assembler/dist/assembler.min.js"></script>
<title>Learning Assembler CSS</title>
<style></style>
</head>
<body></body>
</html>
你也可以用下面的命令在npm 或yarn 中安装Assembler CSS。
npm install @asmcss/assembler
# OR yarn
yarn add @asmcss/assembler
开始使用
Assembler CSS为HTML元素引入了一个新的x-style 属性，这与默认的HTMLstyle 属性的工作方式相似，但效果更好。为了证明这一点，请看下面的代码。
<div
style="
width: 100px;
height: 100px;
background: #ff5722;
border-radius: 50%;
margin: auto;
"
></div>
它产生的输出结果如下。
这个组件可以使用相同的CSS属性和值，用x-style 属性重新创建。
<div
x-style="
width: 100px;
height: 100px;
background: #ff5722;
border-radius: 50%;
margin: auto;
"
></div>
你会注意到，这两个代码块之间的唯一区别是将style 属性改为x-style 。虽然这看起来没有什么意思，但这是在解释使用Assembler CSS是多么容易，在接下来的章节中，我们将深入探索这个框架提供的强大功能。
虚拟属性
Assembler CSS是围绕着虚拟属性发展起来的，它是一个精心策划的几乎所有CSS属性的缩短列表，其灵感来自Bootstrap和Tailwind等流行的CSS框架。这类似于实用类的工作方式，但这次是用自定义值。
使用虚拟属性，我们可以像下面这样重写我们之前的例子。
<div x-style="w:100px; h:100px; bg:#643296; radius:50%; m:auto;"></div>
我们可以看到，这没有那么繁琐，也更容易阅读，运行代码会产生相同的输出。
值得一提的是，一些虚拟属性有相关的默认值，其中一些可以根据其值映射到不同的属性。属于这个类别的一个例子是flex 属性，如果没有指定值，它就映射到display: flex; 。或者，如果指定了一个值，则控制灵活项目上的灵活长度（例如，flex: auto; ）。
<div x-style="flex; flex:auto"></div>
<!-- is an equivalent of -->
<div x-style="display:flex; flex:auto"></div>
CSS变量
Assembler CSSx-style 也可以让你轻松地访问CSS变量，使用@ 符号，后面跟着变量名称，或者使用标准的var() 语法。
<style>
:root {
--primary: #3f51b5;
--secondary: #673ab7;
}
</style>
<p x-style="color:@primary">Hello World!</p>
<p x-style="color:var(--secondary)" lang="es">Hola Mundo!</p>
状态
Assembler CSS的另一个很棒的功能是为不同的状态改变样式；例如，你可以直接从x-style 属性中改变一个按钮的颜色，当用户在它上面徘徊时。
尽管像Tailwind这样的其他CSS框架已经提供了这样的功能，但在Assembler CSS中，你可以为每个状态的改变定义自定义值。
我们可以在Assembler CSS中使用这个功能，在属性名称后面加上句点符号. ，然后再加上你想要针对的状态名称。
例如，在聚焦时改变一个输入元素的边框，看起来会是这样的。
<input
x-style="border: 1px solid #ccc;border.focus: 2px solid #ccc;"
type="text"
/>
下面是一个更详细的例子，当用户将鼠标悬停在div ，将其背景颜色改为黑色。
<div
x-style="
bg: #ffcc00;
bg.hover: #1f1f23;
color: #fff;
p: 40px;
text: 20px;
radius;
shadow;
"
>
HOVER YOUR MOUSE HERE
</div>
使用这个功能的一个缺点是，你需要在每次状态改变时将你的状态附加到你想修改的属性上，这可能会使我们的代码更加健壮。
假设我们想在用户悬停在div ，改变背景颜色、文本颜色和文本大小。在我们之前的例子中，我们的代码会是这样的。
<div
x-style="
bg: #ffcc00;
bg.hover: #1f1f23;
color: #fff;
color.hover: #ccc;
text: 20px;
text.hover: 30px;
"
>
HOVER YOUR MOUSE HERE
</div>
媒体中断点
用Assembler CSS制作响应式设计是很简单的。
与Bootstrap和Tailwind等框架不同，它们只允许你在桌面和移动设备上修改margin、display和padding等属性，Assembler CSS可以让你轻松地直接从x-style 属性中修改它提供的所有虚拟属性，用于多个断点。
我们可以通过在虚拟属性名称前加上|符号和断点名称来锁定一个特定的断点。
<div x-style="bg:red; sm|bg:green; md|bg:blue; w:150px; h:150px; mx:auto"></div>
运行上面的代码，在小型设备上会显示一个绿框，在中型台式机和平板电脑上显示一个蓝框，在其他设备上显示一个红框。
支持的断点包括。
xs- 超小型设备sm- 小型设备md- 中型设备lg- 大型设备，以及xl- 超大型设备
混合器
混合器可能是Assembler CSS中最有用的功能之一，因为它允许你编写可重复使用的样式规则，可以应用于多个元素。
混合器是通过在CSS变量上添加--mixin ，我们可以通过在混合器的名称前加上^ 符号，将它们应用到我们的元素上（通过x-style ）。
<style>
:root {
--btn--mixin: "px:10px; py:10px; rounded; font-weight:bold; outline:none; border:none;";
}
</style>
<button x-style="^btn">Click Me</button>
混合器参数
在汇编CSS中，你也可以在应用混合器时向其传递参数，然后在创建混合器时将这些参数作为参数访问。
混合器中的参数可以通过使用${index} 来访问，其中index 是参数的零基索引。
<style>
:root {
--btn--mixin: "px:10px; py:10px; rounded; font-weight:bold; outline:none; border:none;";
--btn-bg--mixin: "color:#fff;bg-color: ${0};
}
</style>
<button x-style="^btn ^btn-bg:tomato">Click Me</button>
在上面的代码示例中，我们首先创建了一个 mixin (btn)，帮助我们的按钮应用基本的样式，之后又创建了一个新的 mixinbtn-bg ，修改我们的按钮的颜色。而在我们的按钮元素中，我们通过在mixin的名称前加上冒号: ，然后再加上我们的参数值来传递参数。
总结
Assembler CSS可以帮助你建立漂亮的UI组件，而无需安装和维护复杂的软件堆栈。在本教程中，我们介绍了如何安装这个框架，以及对其功能的深入指导。
值得一提的是，Assembler CSS是一个相当新的CSS框架，它的第一个版本在2021年8月11日发布，这意味着我们应该期待在不久的将来有大量令人兴奋的更新。
