简介
在前端开发中，我们常常需要使用 CSS 样式来实现页面布局和样式设计。为了方便管理和使用样式，我们通常会将一些常用的样式打包成一个 npm 包。
@beisen-phoenix/mobile-style-token 就是一个常用的移动端样式包，它包含了常见的移动端样式，并且使用方便。
本文将介绍如何使用 @beisen-phoenix/mobile-style-token，包括安装和使用方法，并提供一些示例代码，希望能够帮助大家更好地开发移动端网站。
安装
在开始使用 @beisen-phoenix/mobile-style-token 之前，我们需要先安装它。
使用 npm，可以在命令行中执行以下命令来安装 @beisen-phoenix/mobile-style-token：
npm install @beisen-phoenix/mobile-style-token
安装完成之后，就可以开始使用它了。
使用方法
@beisen-phoenix/mobile-style-token 提供了一些常见的移动端样式，我们可以直接在项目中使用它们。
引入样式
我们可以在项目中的入口文件中引入 @beisen-phoenix/mobile-style-token 的样式：
import "@beisen-phoenix/mobile-style-token/dist/index.css";
这样，@beisen-phoenix/mobile-style-token 的样式就被引入到了项目中。
使用样式变量
@beisen-phoenix/mobile-style-token 还提供了一些常用的样式变量，我们可以在样式文件中使用这些变量。样式变量的格式为 $tokenName，比如 $bg-color 表示背景色。
下面是一个使用样式变量的例子：
body {
background-color: $bg-color;
}使用 mixin
@beisen-phoenix/mobile-style-token 还提供了一些 mixin，我们可以在样式文件中使用这些 mixin 来实现样式的复用。
下面是一个使用 mixin 的例子：
.btn {
@include button($color-primary);
}示例代码
下面是一个完整的示例代码，在引入样式之后，我们可以在页面中使用 @beisen-phoenix/mobile-style-token 提供的样式和变量：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------------------
----- -------------------------------------------------------- ---------------- --
-------
---- -
---------- ----------------
------ ------------
----------------- ----------
-
------- -
-------- ---------
----------------- -----------------
------ -------------------
-
---- -
-------- -----------------------
-
--------
-------
------
------- ------------------------------
------- ---------------------------
-----------------------
-------
-------结论
@beisen-phoenix/mobile-style-token 是一个实用的移动端样式包，它提供了常见的移动端样式和变量，并且使用方便。
在开发移动端网站时，我们可以使用 @beisen-phoenix/mobile-style-token 来快速实现样式的设计和布局，提高开发效率。
希望本文能够帮助大家更好地使用 @beisen-phoenix/mobile-style-token，也希望能够为开发移动端网站的同学们提供一些指导和参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/beisen-phoenix-mobile-style-token