在前端开发领域，npm 是一个非常重要的工具，它允许我们轻松地管理包依赖、构建项目，并且通过 npm 发布自己的包。其中一个非常棒的 npm 包是 amarna，可以帮助我们快速地创建响应式网格布局，今天我们来一起学习一下如何使用 amarna 。
什么是 amarna
amarna 是一个非常轻量的 npm 包，它基于 flexbox 实现了一种类似于 Bootstrap 栅格系统的网格布局。它可以帮助我们快速地创建响应式的布局，并且提供了一系列列和媒体查询的 mixins，让我们可以非常灵活地定制我们的响应式布局。
安装 amarna
使用 amarna 非常简单，我们可以通过 npm 安装它：
npm install amarna --save
安装完成之后，我们就可以开始使用它了。
使用 amarna
1. 创建布局
首先，我们需要创建一个布局容器：
<div class="container">
<div class="row">
<div class="col-3">1</div>
<div class="col-9">2</div>
</div>
</div>这个布局容器包含一个 .container 元素，它用来设置布局容器的最大宽度。.row 元素用作每一行的容器，.col-* 元素用作每一个网格的容器。我们可以通过设置 .col-* 元素的类名和网格数来定义布局。
2. 定义样式
-- -------------------- ---- ------- -- -- ------ -- ------- -------------------------------- -- -- ---------- ----- -- ---------- - ----------- - -- -- ---- --- -- ---- - ----- - -- -- ------ --- -- ------ - -------- - ------ - -------- - --- ------- - --------- -
以上代码导入了 amarna，然后定义了 .container、.row、以及 .col-* 元素的样式。其中，我们使用了 @container、@row、@col 这三个 mixins 来定义样式。@col mixin 接受一个参数，表示网格的数量。
3. 定制样式
除了定义列的数量外，我们还可以通过 amarna 提供的一系列 mixins 来定制我们的响应式布局：
-- -------------------- ---- -------
-- -------------- --
------------- -
--- --- -------
--- ------- -------
--- ------- -------
--- ------- --------
---- -------- --------
--
-- -- --------- --- --
--------- -
--------
-------- -- -
--------
-
-------- -- -
--------
-
-
-- -- ------ -- --
------ ------ --- ----------- ------ -
------ -
---------
-
-以上代码定义了屏幕尺寸和列宽的映射关系，并且使用 @include 混入了各种响应式设备的样式。另外，我们还可以使用常规的 @media 查询，直接在样式表中编写响应式查询。
总结
通过这篇文章，我们学习了如何使用 amarna 来创建响应式网格布局。amarna 非常易于使用，而且提供了非常灵活的定制方式，可以满足我们大部分的布局需求。希望这篇教程可以帮助你更好地掌握 amarna 的使用，并且提高自己的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e4d9381d61a3540aca