Modular Scale 项目技术文档

1. 安装指南

Eyeglass

• 终端命令：npm install modularscale-sass --save-dev
• SCSS 导入：@import 'modularscale'

Webpack with sass-loader

• 终端命令：npm install modularscale-sass --save-dev
• Webpack 配置：安装并使用 sass-loader
• SCSS 导入：@import '~modularscale-sass/stylesheets/modularscale';

Bower

• 终端命令：bower install modular-scale --save-dev
• SCSS 导入：@import '../link_to_component_dir/modularscale';

Vanilla Sass

• 下载最新 zip 文件
• 解压到项目中
• SCSS 导入：@import 'modularscale';

Compass（不再更新，最后版本 v3.0.2）

• 终端命令：gem install modular-scale --pre
• Compass 配置：require 'modular-scale'
• SCSS 导入：@import 'modularscale';

2. 项目的使用说明

初始设置与使用

首先，你需要配置 $modularscale 映射以满足你的需求。

$modularscale: (
  base: 1em,
  ratio: 1.5
);

你可以使用任何单位作为基础值，并选择任意比例。你还可以定义多个基础值来创建多条比例线。

$modularscale: (
  base: 1em 1.2em 1.6em,
  ratio: 1.5
);

配置完成后，你可以在任何地方使用 ms(n) 函数，其中 n 是比例上的点。

h4 {
  font-size: ms(3);
}

多条比例线

Modular scale 支持不同的设置线程，因此你可以设置不同的比例或断点。

$modularscale: (
  base: 1em,
  ratio: 1.5,
  a: (
    ratio: 1.3
  )
);

要调用名为 a 的线程，可以在函数中这样调用：

h5 {
  font-size: ms(2, $thread: a);
}

响应式排版

你可以在配置中加入断点值，用于响应式排版。

$modularscale: (
  base: 12px,
  ratio: 1.5,
  400px: (
    ratio: 1.2,
  ),
  900px: (
    base: 16px,
    ratio: 1.3,
  ),
  1200px: (
    base: 16px,
    ratio: 1.6,
  ),
);

然后，调用 @include ms-respond(); 混合器，生成完全流动和响应的比例。

h2 {
  @include ms-respond(font-size,5);
}

3. 项目API使用文档

比例函数

• ms(n)：返回比例上的第 n 个值。
• ms-function()：无冲突函数，避免与其他库冲突。

多线程函数

• ms(n, $thread: a)：调用指定线程的比例值。

响应式混合器

• @include ms-respond(property, n)：生成响应式比例。

4. 项目安装方式

Eyeglass

• 终端命令：npm install modularscale-sass --save-dev
• SCSS 导入：@import 'modularscale'

Webpack with sass-loader

• 终端命令：npm install modularscale-sass --save-dev
• Webpack 配置：安装并使用 sass-loader
• SCSS 导入：@import '~modularscale-sass/stylesheets/modularscale';

Bower

• 终端命令：bower install modular-scale --save-dev
• SCSS 导入：@import '../link_to_component_dir/modularscale';

Vanilla Sass

• 下载最新 zip 文件
• 解压到项目中
• SCSS 导入：@import 'modularscale';

Compass（不再更新，最后版本 v3.0.2）

• 终端命令：gem install modular-scale --pre
• Compass 配置：require 'modular-scale'
• SCSS 导入：@import 'modularscale';