公用的less minix 和less开发规范

base.less

@import (reference) "variables.less";
//公共的minix开始-------------------------------------------------------------------------------------------
.clearfix{
  &:before,&:after{
    display: table;
    content: '';
  }
  &:after{
    clear: both;
  }
}
.horizontalCenter(@width){
  position: absolute;
  left: 50%;
  width: @width;
  margin-left: -@width/2;
}
.absuCenter(@width;@height){
  position: absolute;
  top: 50%;
  left: 50%;
  width: @width;
  height: @height;
  margin-left: -@width/2;
  margin-top: -@height/2;
}
.textOverflow{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
}
.position(@position,@top:auto,@right:auto,@bottom:auto,@left:auto,@z-index:auto){
  position: @position;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
  z-index: @z-index;
}

  //为兼容不同浏览器的minix
.opacity(@opacity){
  @filter:@opacity * 100;
  opacity: @opacity;
  filter: alpha(opacity=@filter);
}
.calcWidth(@width){
  width:-moz-calc(@width);
  width:-webkit-calc(@width);
  width:calc(@width);
}
.border-radius(@raidus){
  -webkit-border-radius: @raidus;
  -moz-border-radius: @raidus;
  border-radius: @raidus;
}
.box-shadow(@shadow){
  -moz-box-shadow:@shadow;
  -webkit-box-shadow:@shadow;
  -o-box-shadow: @shadow;
  box-shadow:@shadow;
}
.box-sizing(@sizing){
  -webkit-box-sizing: @sizing;
  -moz-box-sizing: @sizing;
  box-sizing:@sizing;
}
//此属性可放置多个参数
.text-shadow(...){
  -webkit-text-shadow: @arguments;
  -moz-text-shadow: @arguments;
  text-shadow: @arguments;
}
.transition(@transition){
  -webkit-transition:@transition;
  -moz-transition:@transition;
  -o-transition:@transition;
  -ms-transition:@transition;
  transition:@transition;
}
.transform(@transform){
  -webkit-transform: @transform;
  -moz-transform: @transform;
  -o-transform: @transform;
  -ms-transform: @transform;
  transform:@transform;
}
.animation(@animation){
  -webkit-animation: @animation;
  -moz-animation: @animation;
  -o-animation: @animation;
  animation: @animation;
}
.user-select(@select){
  -moz-user-select:@select;
  -webkit-user-select:@select;
  -o-user-select:@select;
  -ms-user-select:@select;
  -khtml-user-select: @select;
  user-select:@select;
}

//gradient开始
//相反方向
@top_opposite:bottom;
@bottom_opposite:top;
@left_opposite:right;
@right_opposite:left;
.opposite(@origin) when (length(@origin)=1) and (isstring(@origin)){
  @opposite:~"@{@{origin}_opposite}";
  @to_opposite:~"to @{opposite}";
}
.opposite(@origin) when (length(@origin)=1) and (isnumber(@origin)) and(@origin<180){
  @opposite:@origin+180;
  @to_opposite:@origin;
}
.opposite(@origin) when (length(@origin)=1) and (isnumber(@origin)) and(@origin>=180){
  @opposite:@origin+(-180);
  @to_opposite:@origin;
}
.opposite(@origin) when (length(@origin)=2) and ("@{origin}"="left top"){
  @opposite:~"right bottom";
  @to_opposite:~"to @{opposite}";
}
.opposite(@origin) when (length(@origin)=2) and ("@{origin}"="left bottom"){
  @opposite:~"right top";
  @to_opposite:~"to @{opposite}";
}
.opposite(@origin) when (length(@origin)=2) and ("@{origin}"="right top"){
  @opposite:~"left bottom";
  @to_opposite:~"to @{opposite}";
}
.opposite(@origin) when (length(@origin)=2) and ("@{origin}"="right bottom"){
  @opposite:~"left top";
  @to_opposite:~"to @{opposite}";
}
.gradient (@origin:top, @start, @stop) {
  .opposite(@origin);
  background-color: mix(@start,@stop);
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -webkit-gradient(linear, @origin, @opposite, from(@start), to(@stop));
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@to_opposite, @start, @stop);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@start, endColorstr=@stop, GradientType=0);
}
//gradient结束


  //只支持单属性opacity的动画定义
.keyframes-opacity(10,@value) when (@value<=1){
@indicate:percentage(@value);
  @{indicate} {
    opacity: @value;
}
.keyframes-opacity(10,@value+0.1);
}
  //只支持单属性
.keyframs(2,@prop,@start,@end){
  0%{
    @{prop}:@start;
  }
  100%{
    @{prop}:@end;
  }
}

//复合样式的minix
/*下面的全部作废，为项目中大多数是设了部分属性，如`margin-top`和`margin-right`,但如果用了此`minix`，
会造成多了`margin-bottom`和`margin-left`属性，即使他们设的是默认属性。这样很不好，如果要修改这个`minix`，
由于`less`中的判断只有`when`关键字，所以要写11条(怎么算出来的：$C_4^2+C_4^3+1$)的判断，很麻烦，所以废弃。
后面会有`sass`的方法，完美解决这个问题**/
.margin(@top:0;@right:0;@bottom:0;@left:0){
  margin-top: @top;
  margin-right: @right;
  margin-bottom: @bottom;
  margin-left: @left;
}
.padding(@top:0;@right:0;@bottom:0;@left:0){
  padding-top: @top;
  padding-right: @right;
  padding-bottom: @bottom;
  padding-left: @left;
}
//border没有默认值，这儿默认成none
.border(@top:none;@right:none;@bottom:none;@left:none){
  border-top: @top;
  border-right: @right;
  border-bottom: @bottom;
  border-left: @left;
}
.borderRadius(@left_top:0;@right_top:0;@left_bottom:0;@right_bottom:0){
  border-top-left-radius:@left_top;
  border-top-right-radius:@right_top;
  border-bottom-left-radius:@left_bottom;
  border-bottom-right-radius:@right_bottom;
}
//border-color没有默认值，这儿默认成transparent
.borderColor(@top-color:transparent;@right-color:transparent;@bottom-color:transparent;@left-color:transparent){
  border-top-color:@top-color;
  border-right-color:@right-color;
  border-bottom-color:@bottom-color;
  border-left-color:@left-color;
}

//公共的minix结束-------------------------------------------------------------------------------------------

variables.less

//存储变量的文件
@black:#000;
@lightblack:#333;

@blue:#3872F0;
@font-darkblue-a:#3f4a69;
@font-darkblue-b:#415571;

@red:#f00;
@info-red:#eb5f50;

@gray:#ccc;
@font-deepgray:#666;
@border-lightgray-a:#d8dde2;
@border-lightgray-b:#DDE0E6;

@deepyellow:#ffcc66;
@lightyellow-a:#FFFFA3;
@lightyellow-b:#FFF17D;

@white:#fff;
@bg-white-start:#F5F5F5;
@bg-white-end:#EEEEEE;



//蓝色主题的主要颜色,蓝色主题且以"Blue"为名，其下的主要颜色都以主题名为开头
@Blue-color-blue:#1D89E4;//用途较多，所以用color表明其作用，是此主题的主色
@Blue-color-skyblue-a:#1E89E5;
@Blue-color-skyblue-b:#0f79d5;
@Blue-border-lightgray-a:#e4e4e4;//常用作border
@Blue-border-lightgray-b:#ddd;
@Blue-border-lightgray-c:#ccd1dc;
@Blue-bg-lightgray:#f9f9f9;//常作背景色
@Blue-font-blue:#3a91ef;
@Blue-font-blue-hover:#59b1fb;//字体hover颜色



@theme-color:@Blue-color-blue;
@theme-border-a:@Blue-border-lightgray-a;
@theme-border-b:@Blue-border-lightgray-b;
@theme-bg:@Blue-bg-lightgray;
@theme-font-hover:@Blue-font-blue-hover;

@font-family:"宋体",Arial,sans-serif;

开发规范_Less.md

一、不同主题的颜色字体等变量定义规范：

假设有一蓝色主题，且起名为"Blue"。那么：

• 其下的所有变量都以"Blue"为开头起名
• 变量名应包含主要特征和用途,若用途较多用"color"声明
• 对于一些动作变化效果，如hover的颜色效果，最后再跟上对应的动作名

实例：

@Blue-color-blue:#1D89E4;//用途较多,是此主题的主色
@Blue-border-lightgray-a:#e4e4e4;//常用作border
@Blue-border-lightgray-b:#dddddd;
@Blue-bg-lightgray:#f9f9f9;//常作背景色
@Blue-font-blue-hover:#0f79d5;//常作字体颜色,当hover时字体为这个颜色

这样，就定义了一套主题的颜色。下面的语句决定我们使用的主题：

@theme-color:@Blue-color-blue;
@theme-border-a:@Blue-border-lightgray-a;
@theme-border-b:@Blue-border-lightgray-b;
@theme-bg:@Blue-bg-lightgray;
@theme-font-hover:@Blue-font-blue-hover;

这里定义的变量才是实际在项目中用的，这些名称只包含了主要作用，而不包含特征。要切换不同的主题，只需要该这些变量对应的值就可以了。

二、跟主题无关的颜色字体等变量定义规范：

和跟主题相关的颜色名称定义类似，只不过开头不用加主题名，使用的时候可以明显区分主题相关的颜色和不相关的颜色。

• 用途较多的颜色：不用声明作用，只需用单词表明特征即可
• 一些有常规用途的颜色：声明主要作用和特征

这个比较灵活，具体视情况而定。
实例：

@white:#fff;
@font-red:#f00;

三、兼容不同浏览器的样式minix：

以.开头，其名称与样式的名称一致：
实例：

.border-radius(...){
  -webkit-border-radius: @arguments;
  -moz-border-radius: @arguments;
  border-radius: @arguments;
}

四、特殊的minix

1.一些常用的

实例：

.clearfix{
  &:before,&:after,{
    display: table;
    content: '';
  }
  &:after{
    clear: both;
  }
}

2.特殊的keyframes(只能生成单属性的动画定义)

实例：

.keyframs(2,@prop,@start,@end){
      0%{
        @{prop}:@start;
      }
      100%{
        @{prop}:@end;
      }
}
 //只是支持单属性opacity的动画定义
.keyframes-opacity(10,@value) when (@value<=1){
    @indicate:percentage(@value);
      @{indicate} {
    opacity: @value;
}
.keyframes-opacity(10,@value+0.1);
}

五、复合样式minix:

注意：此部分废弃，因为项目中大多数是设了部分属性，如margin-top和margin-right,但如果用了此minix，会造成多了margin-bottom和margin-left属性，即使他们设的是默认属性。这样很不好，如果要修改这个minix，由于less中的判断只有when关键字，所以要写11条(怎么算出来的：$C_4^2+C_4^3+1$)的判断，很麻烦，所以废弃。后面会有sass的方法，完美解决这个问题
实例：

//根据不同的参数只设置部分属性,其他的还是默认值0
.margin(@top:0;@right:0;@bottom:0;@left:0){
  margin-top: @top;
  margin-right: @right;
  margin-bottom: @bottom;
  margin-left: @left;
}

为了区分兼容不同浏览器的minix，这个采用"驼峰命名法".