ciba-sass

文档

• 快速目录
• 文档
• 贡献

使用

1. 设置设计图宽度 $global-width, 默认1080

2. 设置全局单位 $global-unit, 默认 rem, 可选 normal|rem|px|percent

3. 其他配置

   • $global-rem-size, rem比例, 默认10
   • $global-px-size, px尺寸, 默认320

4. 在样式中使用

   
   	h1 {
   		height: use(80); // 80是设计图中的高度
   	}
   

5. 在include中使用

   
   	h2 {
   		@include atlw(30, 30, 100); // 30, 30, 100 均为设计图中尺寸
   		@include height(60); // 60是设计图中的尺寸
   	}
   

@function use() 的使用详解

1. 正常 use(80), 返回处理后的结果, 使用全局单位

   
   	// 使用
   	h3 {
   		font-size: use(108);
   	}
   
   	// 生成
   	h3 {
   		font-size: 1rem;
   	}
   

2. 自定义单位 use(80px), 处理后返回 80px, 不做处理

   
   	// 使用
   	h3 {
   		@include square(50px);
   	}
   
   	// 生成
   	h3 {
   		width: 50px;
   		height: 50px;
   	}
   

添加

1. 添加 @mixin, 根据分类添加到对应文件, 没文件就新建一个

2. 添加 @function, 个别的扔到 main.scss 中, 集体添加就新建一个文件

3. 添加 全局变量, 放到 config.scss 中, 带上 !default

4. 添加时必须带注释, 注释要紧挨内容

   
   	// 说明
   	// 示例
   	// 测试
   	@mixin xxx() {}
   	@function xxx() {}
   	$global-xxx: ...;
   

5. 在 readme.md 中添加开发日志

6. 执行 npm run build 或者 node build.js, 生成文档

7. 修改 package.json 中的 version 字段, 然后 npm publish, git commit & push

8. 如果要新建文件夹, 请联系 ccforeverd

开发日志

2017-04-12

• 添加 @mixin abr

2017-04-11

• 添加 reset.scss

2017-03-21

• 初始化
• 编写sass基本文件
  • main.scss
  • config.scss
  • base.scss
  • position.scss
  • center.scss
  • transform.scss
• 编写文档生成工具 build.js

2017-03-22

• 完善 readme.md