在前端开发过程中，我们经常需要使用一些 CSS 框架或者工具库来简化样式编写的工作。其中一个非常受欢迎的 CSS 框架就是 at.css。
at.css 是一款轻量级的 CSS 框架，它的特点是使用简单，样式代码丰富，拥有多种风格和主题。在本篇文章中，我们将介绍如何通过 npm 包来使用 at.css 框架。
安装和导入 at.css
在使用 at.css 框架之前，我们需要先安装这个 npm 包。在命令行中输入以下指令即可安装：
npm install at.css
安装完成之后，我们需要将 at.css 框架导入到我们的项目中。可以通过以下两种方式来实现：
导入 CSS 文件
在 HTML 文件中，我们可以使用以下代码来导入 at.css 框架：
<link rel="stylesheet" href="./node_modules/at.css/at.css">
导入 SCSS 源代码
在 SCSS 项目中，我们可以通过导入 SCSS 源文件的方式来使用 at.css 框架。这里我们假设你已经熟悉了如何使用 SCSS。
在 SCSS 文件中，我们可以使用以下代码来导入 at.css 框架：
@import "./node_modules/at.css/src/scss/at";
使用 at.css
在将 at.css 框架导入到项目中之后，我们就可以使用其中的样式了。下面介绍一些常用的样式和用法。
布局
在 at.css 中，我们可以方便地使用栅格布局来排版。如下代码：
<div class="at-row"> <div class="at-col">col-1</div> <div class="at-col">col-2</div> <div class="at-col">col-3</div> </div>
其中，at-row 表示一行，at-col 表示一个列。默认情况下，一行最多可以容纳 12 个列，可以通过以下方式来指定每个列所占的宽度，例如：
<div class="at-row"> <div class="at-col at-col-4">col-1</div> <div class="at-col at-col-4">col-2</div> <div class="at-col at-col-4">col-3</div> </div>
这里的 at-col-4 表示每个列占据整行的 1/3 宽度。
表格
at.css 框架还提供了一些表格样式，可以让表格更加美观和易读。如下代码：
-- -------------------- ---- -------
------ -----------------
-------
----
-------------
------------
---------------
-----
--------
-------
----
-------------
-----------
---------------
-----
----
------------
-----------
-------------
-----
--------
--------按钮
at.css 框架提供了多种风格的按钮，可以用于不同的场景。如下代码：
<button class="at-btn at-btn-primary">Primary</button> <button class="at-btn at-btn-secondary">Secondary</button> <button class="at-btn at-btn-success">Success</button> <button class="at-btn at-btn-warning">Warning</button> <button class="at-btn at-btn-danger">Danger</button>
在这个例子中，我们分别使用了不同的类名来表示不同的按钮样式。at-btn 表示基本按钮，at-btn-primary 表示主要按钮，at-btn-secondary 表示次要按钮，依此类推。
总结
在本文中，我们介绍了如何使用 npm 包来安装和导入 at.css 框架，并演示了一些常用样式和用法。at.css 框架不仅提供了多种样式，还能够方便地与其他库或框架集成，可以大大地提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ea81e8991b448d797a