在前端开发中，CSS 往往是最令人头疼的部分。不仅仅是样式的编写，还包括各种兼容性问题和一些奇怪的问题。而使用 npm 包 @savvy-css/base-settings 可以帮助我们解决一部分问题，并且简化 CSS 的编写。
什么是 @savvy-css/base-settings
@savvy-css/base-settings 是一个基础的 CSS 样式库，包含了一些常用的 CSS 变量和默认设置。通过使用这个库，我们可以更加快速地开发和维护样式。
如何使用 @savvy-css/base-settings
安装
使用 npm 安装 @savvy-css/base-settings
npm install @savvy-css/base-settings
使用
在你的项目中引入 @savvy-css/base-settings：
@import '~@savvy-css/base-settings/base-settings.css';
然后你就可以在你的项目中使用这些变量了，例如：
h1 {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
}这里 --font-size-h1 和 --font-weight-bold 都是 @savvy-css/base-settings 中定义好的变量。
变量列表
以下是 @savvy-css/base-settings 中包含的一些变量，可以用于你的项目中：
| 变量名 | 描述 | 默认值 |
|---|---|---|
| --color-primary | 主要颜色 | #0084ff |
| --color-secondary | 次要颜色 | #6c757d |
| --color-success | 成功状态颜色 | #28a745 |
| --color-warning | 警告状态颜色 | #ffc107 |
| --color-danger | 错误状态颜色 | #dc3545 |
| --color-info | 信息状态颜色 | #17a2b8 |
| --h-spacing | 水平间距 | 1rem |
| --v-spacing | 垂直间距 | 1rem |
| --font-family-sans-serif | 无衬线字体 | system-ui, -apple-system, BlinkMacSystemFont |
| --font-size | 主要字体大小 | 1rem |
| --font-size-h1 | 一级标题字体大小 | 2.5rem |
| --font-size-h2 | 二级标题字体大小 | 2rem |
| --font-size-h3 | 三级标题字体大小 | 1.75rem |
| --font-size-h4 | 四级标题字体大小 | 1.5rem |
| --font-size-h5 | 五级标题字体大小 | 1.25rem |
| --font-size-h6 | 六级标题字体大小 | 1rem |
| --font-weight-normal | 普通字体粗细值 | 400 |
| --font-weight-bold | 粗体字体粗细值 | 700 |
| --line-height | 行高 | 1.5 |
| --border-width | 边框宽度 | 1px |
| --border-radius | 边框圆角 | 4px |
| --transition-duration | 过渡时间 | 0.3s |
示例代码
下面是一个使用 @savvy-css/base-settings 的示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
----- ---------------- ------------------
-------
------
--------
----------------
---------
------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- -------- ----- ------- ---- ----------- ------- ------ -------- ------ -- -- ----------- --------------
-------
--------
--------- ---- ------- ---------
---------
-------
--------- -------------------- ---- ------- ------- ---------------------------------------------- ------ - ----------------- --------------------- ------ ------ -------- ---------------- ----------------- - -- - ---------- -------------------- ------------ ------------------------ ------- -- - ---- - -------- ---------------- ----------------- - - - ---------- ----------------- ------------ ------------------- - ------ - ----------------- ----------------------- ------ ------ -------- ---------------- ----------------- -
在上述示例中，我们利用 @savvy-css/base-settings 中定义好的参数来构建了一个简单的页面样式。需要注意的是，在这个例子中，我们使用了 @import 方式来引入库，因为我们假设你正在使用 webpack 等打包工具。如果你想直接在 HTML 中引入，也可以使用 link 标签来引入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727581e8991b448e8a92