定制 Token

sacss/

├── less/ # 存放 LESS Mixin 的文件夹

│   ├── SACSS.less # 帮助创建 sacss 的辅助 LESS Mixin

│   ├── WidthPrefix.less # 为核心代码添加自定义前缀

│   └── Helpers.less # 独立于 sacss 之外的常用辅助 Mixin

├── sass/ # 存放 LESS Mixin 的文件夹

│   ├── SACSS.scss # 帮助创建 sacss 的辅助 SASS Mixin

│   ├── WidthPrefix.scss # 为核心代码添加自定义前缀

│   └── Helpers.scss # 独立于 sacss 之外的常用辅助 mixin

└── index.css # 所有项目基本相同的核心代码（只推荐定制，命名前缀）;

less 和 sass 拥有完全相同的文件和 API，只是语法不一样的实现而已。

核心代码 sacss/index.css 里面存放的基本都是布局相关的代码。仅有纯黑和纯白两个颜色，甚至连常用的 font-size 相关的代码都不包含。

原因在于不同的设计师对于不同的项目，拥有着不同的设计规范，我们建议结合项目进行定制。

SACSS API

名称	解释	示例
前缀	class name 前缀	'_'
属性名	完整的 Style 属性	'font-size'
属性缩写	基于命名规则的属性缩写	'fs'
值列表	需要连续输出的值列表	8,16,24
单位	所有的值会和单位进行乘法运算（为空表示不需要单位）	1px

LESS

@import 'sacss/less/SACSS';

@prefix: ''; // class name 前缀

@unit: 1px; // 单位换算表达式

#SACSS('属性名'; '@{prefix}属性缩写'; '值列表'; @unit);

SASS

@import 'sacss/sass/SACSS';

$prefix: ''; // class name 前缀

$unit: 1px; // 单位换算表达式

@include SACSS('属性名', '#{$prefix}属性缩写', (值列表), $unit);

对于缩写的命名规则，请点击这里。

LESS

@import 'sacss/less/SACSS';

@prefix: '';

@prefix_: '_';

@unit_px: 1px;

@unit_rem: (1/16*1rem); // 注意 less 中这里需要括号

#SACSS('margin-top'; '@{prefix}mt'; 8, 16, 24; @unit_px);

#SACSS('margin-right'; '@{prefix}mr'; 8, 16, 14; @unit_px);

#SACSS('margin-bottom'; '@{prefix_}mb'; 8, 16, 24; @unit_rem);

#SACSS('margin-left'; '@{prefix_}ml'; 8, 16, 24; @unit_rem);

SASS

@import 'sacss/sass/SACSS';

$prefix: '';

$prefix_: '_';

$unit_px: 1px;

$unit_rem: 1/16*1rem;

@include SACSS('margin-top', '#{$prefix}mt', (8, 16, 24), $unit_px);

@include SACSS('margin-right', '#{$prefix}mr', (8, 16, 24), $unit_px);

@include SACSS('margin-bottom', '#{$prefix_}mb', (8, 16, 24), $unit_rem);

@include SACSS('margin-left', '#{$prefix_}ml', (8, 16, 24), $unit_rem);

Output CSS

.mt8{margin-top:8px}

.mt16{margin-top:16px}

.mt24{margin-top:24px}

.mr8{margin-right:8px}

.mr16{margin-right:16px}

.mr24{margin-top:24px}

._mb8{margin-bottom:.5rem}

._mb16{margin-bottom:1rem}

._mb14{margin-bottom:1.5rem}

._ml8{margin-left:.5rem}

._ml16{margin-left:1rem}

._ml14{margin-left:1.5rem}

这个与 SACSS 的同名方法，只是为了更加简单和直观的创建 output 中的 CSS 代码。

如果你觉得手写这部分 CSS 毫无压力，也完全可以自己手写。

单位换算

LESS

@import 'sacss/less/SACSS';

// px

#SACSS('margin-top'; 'mt'; 8, 16; 1px);

// rem

#SACSS('margin-bottom'; 'mb'; 8, 16; (1/16*1rem));

// Empty

#SACSS('font-weight'; 'fw'; 100,200,300,400;);

SASS

@import 'sacss/sacss/SACSS';

// px

@include SACSS('margin-top', 'mt', (8, 16), 1px);

// rem

@include SACSS('margin-bottom', 'mb', (8, 16), 1/16*1rem);

// Empty

@include SACSS('font-weight', 'fw', (200,400),);

Output CSS

/* px * /

.mt8{ margin-top: 8px; }

.mt16{ margin-top: 16px; }

/* rem * /

.mb8{ margin-bottom: 0.5rem; }

.mb16{ margin-bottom: 1rem; }

/* Empty * /

.fw200{ font-weight:200; }

.fw400{ font-weight:400; }

如果需要单位基于 rem 的换算，可填写 1/16*1rem 。

SACSS 方法只适用于数字类型的值使用。

比如 font-weight:bold; 不能使用 SACSS 创建，而 font-weight:400; 可以。

项目示例

• A 项目设计规范：所有间距，字号都必须是 4 的倍数，主色为红色；
• B 项目设计规范：所有间距，字号都必须是 5 的倍数，主色为蓝色;

A 项目 LESS

/* 所有间距，字号都必须是 4 的倍数； */

@import 'sacss/less/SACSS';

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

@prefix: '';

// 单位换算表达式

@unit: 1px;

// margin

#SACSS('margin-top'; '@{prefix}mt'; 8, 16; @unit);

#SACSS('margin-right'; '@{prefix}mr'; 8, 16; @unit);

#SACSS('margin-bottom'; '@{prefix}mb'; 8, 16; @unit);

#SACSS('margin-left'; '@{prefix}ml'; 8, 16; @unit);

// padding

#SACSS('padding-top'; '@{prefix}pt'; 8, 16; @unit);

#SACSS('padding-right'; '@{prefix}pr'; 8, 16; @unit);

#SACSS('padding-bottom'; '@{prefix}pb'; 8, 16; @unit);

#SACSS('padding-left'; '@{prefix}pl'; 8, 16; @unit);

// font

#SACSS('font-size'; '@{prefix}fs'; 12, 16; @unit);

#SACSS('line-height'; '@{prefix}lh'; 16, 24; @unit);

// Color

.c_primary{ color: red; }

.bc_primary{ background-color: red; }

/* 其它自定义代码 */

A 项目 SASS

/* 所有间距，字号都必须是 4 的倍数； */

@import 'sacss/sass/SACSS';

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

$prefix: '';

// 单位换算表达式

$unit: 1px;

// margin

@include SACSS('margin-top', '#{$prefix}mt', (8, 16), $unit);

@include SACSS('margin-right', '#{$prefix}mr', (8, 16), $unit);

@include SACSS('margin-bottom', '#{$prefix}mb', (8, 16), $unit);

@include SACSS('margin-left', '#{$prefix}ml', (8, 16), $unit);

// padding

@include SACSS('padding-top', '#{$prefix}mt', (8, 16), $unit);

@include SACSS('padding-right', '#{$prefix}mr', (8, 16), $unit);

@include SACSS('padding-bottom', '#{$prefix}mb', (8, 16), $unit);

@include SACSS('padding-left', '#{$prefix}ml', (8, 16), $unit);

// font

@include SACSS('font-size', '#{$prefix}fs', (12, 16), $unit);

@include SACSS('line-height', '#{$prefix}lh', (16, 24), $unit);

// Color

.c_primary{ color: red; }

.bc_primary{ background-color: red; }

/* 其它自定义代码 */

B 项目 LESS

/* 所有间距，字号都必须是 5 的倍数； */

@import 'sacss/less/SACSS.less';

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

@prefix: '';

// 单位换算表达式

@unit: 1px;

// margin

#SACSS('margin-top'; '@{prefix}mt'; 10, 15; @unit);

#SACSS('margin-right'; '@{prefix}mr'; 10, 15; @unit);

#SACSS('margin-bottom'; '@{prefix}mb'; 10, 15; @unit);

#SACSS('margin-left'; '@{prefix}ml'; 10, 15; @unit);

// padding

#SACSS('padding-top'; '@{prefix}pt'; 10, 15; @unit);

#SACSS('padding-right'; '@{prefix}pr'; 10, 15; @unit);

#SACSS('padding-bottom'; '@{prefix}pb'; 10, 15; @unit);

#SACSS('padding-left'; '@{prefix}pl'; 10, 15; @unit);

// font

#SACSS('font-size'; '@{prefix}fs'; 15, 20; @unit);

#SACSS('line-height'; '@{prefix}lh'; 20, 25; @unit);

// Color

.c_primary{ color: blue; }

.bc_primary{ background-color: blue; }

/* 其它自定义代码 */

B 项目 SASS

/* 所有间距，字号都必须是 5 的倍数； */

@import 'sacss/sass/SACSS.scss';

// 所有的 ClassName 都会添加这个前缀(但不推荐添加前缀)

$prefix: '';

// 单位换算表达式

$unit: 1px;

// margin

@include SACSS('margin-top', '#{$prefix}mt', (10, 15), $unit);

@include SACSS('margin-right', '#{$prefix}mr', (10, 15), $unit);

@include SACSS('margin-bottom', '#{$prefix}mb', (10, 15), $unit);

@include SACSS('margin-left', '#{$prefix}ml', (10, 15), $unit);

// padding

@include SACSS('padding-top', '#{$prefix}mt', (10, 15), $unit);

@include SACSS('padding-right', '#{$prefix}mr', (10, 15), $unit);

@include SACSS('padding-bottom', '#{$prefix}mb', (10, 15), $unit);

@include SACSS('padding-left', '#{$prefix}ml', (10, 15), $unit);

// font

@include SACSS('font-size', '#{$prefix}fs', (15, 20), $unit);

@include SACSS('line-height', '#{$prefix}lh', (20, 25), $unit);

// Color

.c_primary{ color: blue; }

.bc_primary{ background-color: blue; }

/* 其它自定义代码 */

哪些需要定制

• margin: 缩写 m
• padding: 缩写 p
• font-size: 缩写 fs
• line-height: 缩写 lh
• color: 缩写 c_
• background-color: 缩写 bc_
• 以及你和设计师沟通下来的 Token(你和设计师之间的约定)