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;}