介绍
npm 是一款包管理工具，可以使用它来安装和管理前端类的依赖包，如 vue, react 等。在前端项目中，使用 npm 安装依赖包是必不可少的一步。npm 包 universal-styles 是一款基于 SCSS 和 PostCSS 的前端样式包，可以帮助前端开发者快速构建网站和应用的样式。
安装
在使用 universal-styles 前，需要先安装 npm 环境。如果你没有安装 npm，可以去 官网 下载并安装。
安装 universal-styles，可以使用如下命令：
npm install universal-styles --save
使用
在安装好 universal-styles 后，可以在项目中使用它。使用 universal-styles 可以有两种方式：
引入样式文件
可以在项目中引入 universal-styles 的样式文件，这样就可以直接使用 universal-styles 提供的 CSS 样式了。引入样式文件可以使用如下的方式：
<link rel="stylesheet" href="universsal-styles/dist/styles.min.css">
使用 Sass mixin
通过使用 Sass mixin，可以轻松地构建样式。使用 Sass mixin 需要先安装 Sass 环境。
使用如下命令来安装 Sass：
npm install --save-dev sass
之后可以在 Sass 中引入 universal-styles 的 mixin：
@import 'node_modules/universal-styles/src/scss/universal-styles';
在引入 mixin 后，就可以使用 universal-styles 提供的 mixin 来构建样式。比如以下是一个使用了 universal-styles mixin 的 Sass 样式：
.my-class {
@include mb(2rem); // 为 .my-class 添加 2rem 的 margin-bottom
@include font-size(1.4rem); // 为 .my-class 添加 1.4rem 的 font-size
}示例代码
以下是一个使用了 universal-styles 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- ------ ---------------
----- ---------------- ---------------------------------------------------------
-------
------
--- ----------------------------- ------ ------------
---- ------------------
-- ------------------------- -- - ------- ------------
-- ------------------------ -- -- ----- ------------
------
---- ------------------
--- ------------------------- -- - ----- ---- - ------- -----------
--- --------------------------- -- - ----- ---- - --------- -----------
------
-------
--------- -------------------- ---- ------- ------- ---------------------------------------------------------- ---------- - -------- ------------ - ------------ - -------- -------------- - ------------- - -------- --------------- - ------------ - -------- -------------- - ------------- - -------- --------------- - --------------- - -------- ----------------- -
总结
使用 npm 包 universal-styles 可以让前端开发者快速构建网站和应用的样式。在使用 universal-styles 时，可以选择引入样式文件或使用 Sass mixin。无论哪种方式，都让样式的开发更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc8cb5cbfe1ea0611a20