简介
@moodxd/base-typography 是一个基于 CSS 的前端 typograhy 样式库，可以帮助开发者快速构建统一的字体排版系统。它采用 SCSS 编写，并通过 Gulp 进行自动化构建，支持自定义配置。
安装
在项目根目录下运行以下命令安装 @moodxd/base-typography：
--- ------- ----------------------- ------
使用
引入样式
通过以下代码将样式表引入项目的 main.scss 文件中：
------- -------------------------------------------
配置变量
@moodxd/base-typography 支持自定义配置，可以在项目根目录下新建 variables.scss 文件，并在其中定义变量覆盖默认值。以下是常用变量及其默认值：
-- ---- ------ ------------- -------------- ------------------- ----- --- ------- ------- ------- ---------- ---- ----- ----- ----- --------- ----- ---------- --------- --------------------- ------------ --------- -- ---- ---- ---------------- ---- --------- ----------------- ---- --------- ------------------------- --- --------- -- ---- ------ ------------------ --- --------- ---------------------------- ---- --------- -- ---- ----- ------------ ---- --------- -- ------- ----- --------------- ---- ---------
使用 mixins
@moodxd/base-typography 提供了若干个 SCSS mixins，可以在项目中直接调用。以下是常用 mixins 示例：
font-size
设置字体大小，可传入百分数或具体数值。默认值为 $font_size_base。
-- - -------- ---------------- -
font-weight
设置字重（粗细），可传入数值或以下常量：
$font_weight_light: 300$font_weight_normal: 400$font_weight_medium: 500$font_weight_semibold: 600$font_weight_bold: 700
-- - -------- ------------------------------- -
line-height
设置行高，可传入百分数或具体数值。默认值为 $line_height_base。
-- - -------- ----------------- -
text-color
设置文本颜色，可传入任意 CSS 颜色值。默认值为 $text_color。
-- - -------- ---------------- -
heading-style
设置标题样式，可传入 1-6 之间的整数。默认值为 2。
-- - -------- ----------------- -
总结
@moodxd/base-typography 可以帮助前端开发者快速构建统一的字体排版系统，进而提高网站的可读性和专业度。通过自定义配置和使用 SCSS mixins，开发者可以更方便地使用和管理此库。
示例代码
---- ---------- --- --------- ----- ----- ---------- ------ ----- ---------------- ---------------------- ----- ---------------- ----------------------- ------- ------ --------- ---------- -------- -- -- ------------ -------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ----------- ------- -------
-- --------- ------- ------------------------------------------- ------------- --------- ----------- ---------------- ----- ------------------ ---- -- - -------- ----------------- - -- - -------- ----------------- - - - -------- ------------------ -------- ----------------- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005556781e8991b448d29a0