title: unicorn样式规范
date: 2016-01-07 10:57:15
tags:
 - unicorn
---
样式文件组织
=============

xx_component.less
=======
组件的样式文件，比如start.less  、 button.less
**注意事项**
这类样式文件里**不需要引入任何less文件** ，unicorn.less里会事先引入variables.less,mixins.less

variables.less
=======
样式变量文件，这里只放可能会变化的属性（允许别人定制的，可以理解为和皮肤相关的）。
**注意事项**
每当添加新的component时，务必注意用注释来表明是哪一个组件的样式并用分割线隔开，如下图
```less

// Buttons
// -------------------------------

@button-color:                    #222;
@button-block-margin:             10px;
@button-border-radius:            2px;
@button-border-width:             1px;

@button-font-size:                18px;
@button-height:                   42px;
@button-padding:                  25px;

@button-small-font-size:          12px;
@button-small-height:             25px;
@button-small-padding:            15px;


@button-light-bg:                 @light;
@button-light-text:               #666;
@button-light-border:             #bbb;
@button-light-active-border:      #bbb;


@button-balanced-bg:             @balanced;
@button-balanced-text:           #fff;
@button-balanced-border:         @balanced;
@button-balanced-active-border:  #a2a2a2;



@button-default-bg:               @button-assertive-bg;
@button-default-text:             @button-assertive-text;
@button-default-border:           @button-assertive-border;
@button-default-active-border:    @button-assertive-active-border;

// Grids
// -------------------------------

@grid-padding-width:              10px;
@grid-responsive-sm-break:        567px;  // smaller than landscape phone
@grid-responsive-md-break:        767px;  // smaller than portrait tablet
@grid-responsive-lg-break:        1023px; // smaller than landscape tablet

```
**主题色**
按照视觉图整理出的常用颜色
颜色相近的就直接用这几个颜色，比如switch开关、绿色的label以及提示icon，都统一成@balanced这个色值
```less
@light:                           #fff;
@positive:                        #387ef5;
@calm:                            #11c1f3;
@balanced:                        #4bd762;
@energized:                       #ffc900;
@assertive:                       #ee5511;
@lightbrown:                      #a29690;
@lightgray:                       #cccccc;

```
mixins.less
=======
用来统一引入 mixin文件夹下的xx_mixin.less
**注意事项**
写新的组件是请把公共代码抽象成mixin，然后记得在这个文件里进行引入，目前分了3类，请把所有component相关的mixin归类在Components注释下
```less

// Components
@import "mixins/button.less";

// Layout
@import "mixins/grid.less";

//Basic
@import "mixins/basic.less";
```

mixins/xx_mixin.less
=======
一般情况下每一个component都会对应一个mixin

新增1个组件样式的开发流程
=======
在variables.less里设置好变量
在mixins文件夹里写对映的mixin
在mixins.less里引入对映的mixin
在unicorn.less里引入对映的组件less文件