Less实践第二篇

把调用部分与函数（含变量声明）部分，分开放置。可以看出 less是很方便的样式编程语言

@charset "utf-8";
@import "reset.css";
@import "classes.less";
@import "buttons.css";
/* style.less - 样式通用文档
---------------------------------------------------------------- */


html,body{height:100%;}

body{
	background:#fffff;	
	.rainbow-gradient(45deg,#ff0000,#ffb600,#fff600,#a5ff00,#00a9ff,#0400ff,#8a00fc, #ff00e9, #ff0059);
	}
a:link,a:visited{
	color:#4a4a4a;text-decoration:none;
	}




#button-wrap{
  position:absolute;
  width:@wrap_width;
  margin:100px (100%-@wrap_width)/2 0;
  border:1px solid #f8f8f8;
  border-color:rgba(237,237,237,0.48);
  padding:10px;
  background:#e7e7e7;
  background:rgba(237,237,237,0.48);
  text-align:center;
  .box-shadow(0px,0px,4px,#787878);

}

.button{
		text-decoration:none !important;
		cursor:pointer;
		display:inline-block;
		border:1px solid #ccc;
		padding:1em  1.5em;
		background-color:#e0e0e0;
		margin:50px 10px auto 50px;
		color:#232323;
		font:14px/1 Verdana, Arial, Sans-serif;
		text-shadow:1px 1px #f2f2f2;
		.inset-box-shadow(0px,0px,4px,#787878);
		.button-gradient;
		 &:hover,&:focus
		 {
			 outline:0;
			.button-gradient(#eee,none,#fff,#c0c0c0);
		 
		 }
			&.ko{font-family:Sans-serif;}
			&.xx-smalll{font-size:10px;}
			&.x-smalll{font-size:11px;}
		    &.smalll{font-size:12px;}
		    &.big{font-size:18px;}
			&.x-big{font-size:20px;}
			&.xx-big{font-size:22px;}
			
			
			
			&.round{
					  .boder-radius(5px);
					
					}
			&.rounder{
					  .boder-radius(15px);
					
					}
			&.roundest{
					 .boder-radius(30px);
					
					}	
			
			&.ani{
			         background-image:@img_url;
					 background-repeat:no-repeat;
					 background-position:left bottom,right top,0 0;
					.button-gradient(#eee,@img_url,#fff,#c0c0c0);
					
					.transition;
					 &:hover,&:focus{
						 background-position:left bottom,right top,0 0;
						.button-gradient(#eee,@img_url,#fff,#c0c0c0);
						  
					  }
					
			      }
			
			
			&.red{
			   border:1px solid #8c484f;
			   color:#121212 !important;
			   .button-gradient(@red_bc,none,@red_bc,@red_ec);
			   &.ani{
			         .button-gradient(@red_bc,@img_url,@red_bc,@red_ec);
					}
			    }
				
			&.orange{
			   border:1px solid #89614A;
			   color:#121212 !important;
			   .button-gradient(@red_bc,none,@red_bc,@red_ec);
			   &.ani{
			         .button-gradient(@red_bc,@img_url,@red_bc,@red_ec);
					}
			    }
				
			&.yellow{
			   border:1px solid #d1c78c;
			   color:#121212 !important;
			   .button-gradient(@red_bc,none,@red_bc,@red_ec);
			   &.ani{
			         .button-gradient(@red_bc,@img_url,@red_bc,@red_ec);
					}
			    }
				
				
				&.green{
			   border:1px solid #6c8e3b;
			   color:#121212 !important;
			   .button-gradient(@red_bc,none,@red_bc,@red_ec);
			   &.ani{
			         .button-gradient(@red_bc,@img_url,@red_bc,@red_ec);
					}
			    }
				
				&.blue{
			   border:1px solid #3665ac;
			   color:#121212 !important;
			   .button-gradient(@red_bc,none,@red_bc,@red_ec);
			   &.ani{
			         .button-gradient(@red_bc,@img_url,@red_bc,@red_ec);
					}
			    }
			
  }
	
	
/*函数和变量
---------------------------------------------------------------- */
@wrap_width:60%;

@img_url:url(../images/button_bg.png);

@red_bc:#e80408;
@red_ec:#6d0019;

.rainbow-gradient(@deg:0deg,
			@c1:red,
			@c2:orange,
			@c3:yellow,
			@c4:green,
			@c5:blue,
			@c6:pink,
			@c7:purple,
			@c8:pink,
			@c9:red
			


){
     background-image:linear-gradient(@deg,@c1 0%, @c1 11%, 
						@c2 11%, @c2 22%, @c3 22%,@c3 33%,@c4 33% ,@c4 44%,@c5 44% 
						,@c5 55%,@c6 55%,@c6 66%,@c7 66%,@c7 77%, @c8 77%,@c8 88%,
						@c9 88%, @c9 100%);
     background-image:-moz-linear-gradient(@deg,@c1 0%, @c1 11%, 
						@c2 11%, @c2 22%, @c3 22%,@c3 33%,@c4 33% ,@c4 44%,@c5 44% 
						,@c5 55%,@c6 55%,@c6 66%,@c7 66%,@c7 77%, @c8 77%,@c8 88%,
						@c9 88%, @c9 100%);
	

}




.box-shadow(@x:1px,@y:1px,@blur:0px,@color:#212121){
   -webkit-box-shadow:@arguments;
   -moz-box-shadow:@arguments;
   box-shadow:@arguments;
 }
 
 
 .inset-box-shadow(@x:1px,@y:1px,@blur:0px,@color:#212121){
   -webkit-box-shadow:inset@x @y @blur @color;
   -moz-box-shadow:inset@x @y @blur @color;
   box-shadow:inset@x @y @blur @color;
 }
 
 .button-gradient(@bgc:#e5e5e5,@img_url:none,@bs:#fff,@be:#cecece){
   background-color:@bgc;
   background-image:@img_url,@img_url,-moz-linear-gradient(@bs,@be);
   background-image:@img_url,@img_url,-webkit-gradient(linear,left top,left bottom,from(@bs),to(@be));
   background-image:@img_url,@img_url,-webkit-linear-gradient(@bs,@be);
	
	background-image:@img_url,@img_url,-o-linear-gradient(@bs,@be);
    background-image:@img_url,@img_url,-ms-linear-gradient(@bs,@be);	
	background-image:@img_url,@img_url,linear-gradient(@bs,@be);
 }

.boder-radius(@radius:8px){

  border-radius:@radius;
  -webkit-border-radius:@radius;
  -moz-border-radius:@radius;
  -khtml-border-radius:@radius;
}

.transition(@prop:all,@duration:0.4s,@easing:ease,@delay:0s){
  -webkit-transition:@prop,@duration,@easing,@delay;
  -moz-transition:@prop,@duration,@easing,@delay;
  -o-transition:@prop,@duration,@easing,@delay;
  -ms-transition:@prop,@duration,@easing,@delay;
  transition:@prop,@duration,@easing,@delay;
}