Less使用——让老司机带你飞

为什么我要使用Less

less的作为编写css的工具插件，省时、方便、检测，具体的安装，请参考我的一篇文章《sublime text3 个人使用心得》，里面我讲解了安装方法，使用webstorm的乘客，我会再写一篇配合使用less的文章的。

Now，get up my car , I will take with you to fly!

* LESS语法
--------------------------------------------------变量-------------------------------------------------
* 【变量】
    less文件 css文件

       less文件                             Css文件

@nice-blue: #5B83AD;                       #header {
@light-blue: @nice-blue + #111;               color: #6c94be;
                                           }
#header {
   color: @light-blue;
} 

【变量详解:】
* 作为属性值，加减乘除
   @base: 5%;
   @filler: @base * 2; => 10%
   @other: @base + @filler; => 15%
   color: #888 / 4; => #222
   background-color: @base-color + #111;
   height: 100% / 2 + @filler; => 60%
   @var: 1px + 5; => 6px

* 用于选择器

       less文件                             CSS文件

       @my-selector:banner;               .banner{
       .@{my-selector}{                      font-weight: bold;
          font-weight: bold;              }
       }

* 用于URL

       @images: "../img";
       body {
         background:url("@{images}/white-sand.png");
       }

* import表达式（注意:less中可以使用，css中不能用，因为这会增加客户端请求资源）

@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";
这样在该less文件中，就引入了其他less文件了，NB不

* 用于属性名

       @property:color;                         .widget {
       .widget {                                    color: #0ee;
         @{property}: #0ee;                         background-color: #999;
         background-@{property}:#999;           }
       } 

* 用于变量名

       @fnord:"I am fnord.";
       @var:"fnord";
       content:@@var;                     content:"I am fnord.";

* 变量是延迟加载的，不一定要在使用之前定义

       .lazy-eval-scope {       .lazy-eval-scope {
         width: @var;                    width: 9%;
         @a: 9%;                   }
       }
       @var: @a;

* 当变量被多次定义时，以最后一次定义为准，且从当前作用域向上搜寻

       @var: 0;                     .class {
       .class {                               one:;
         @var:;                         }
         .brass {                        .class .brass {
           @var:;                           three:;
           three: @var;                  }
           @var: 3;
         }
         one: @var;
       }    

* 默认值:可以建立变量库来统一设定默认值，然后通过重新定义来覆盖变量

@base-color:green;
@dark-color:darken(@base-color,10%);
@import "library.less";
@base-color: red;

【变量混合模式】:某一个/些引入其它定义好的样式

    less文件                                    css文件

    .bordered {                                .bordered {
       border-top: dotted 1px black;               border-top: dotted 1px black;
       border-bottom: solid 2px black;             border-bottom: solid 2px black;
    }                                            }
    #menu a {                                    #menu a {
      color: #111;                                 color: #111;
      .bordered;                                   border-top: dotted 1px black;
    }                                            border-bottom: solid 2px black;
    .post a {                                    }
      color: red;                                .post a {
      .bordered;                                   color: red;
    }                                              border-top: dotted 1px black;
                                                           border-bottom: solid 2px black;
                                                         }

* 支持带参混合：该样式不会出现在.css中，推荐此种写法
.样式1( ){ ... } 
.样式2(@num1, @num2){ ... }
.样式3(@num: 默认值){ ... }

------------------------------------嵌套 子元素的样式 可以在父元素的样式里面定义---------------------------------------------------------------

less的套子写法，令我由无法自拔，到挺身而出，真是透心凉、心飞扬呀，不好意思，一激动就想开火车，我忘了我TM还在写技术博客呢，sorry，那么现在我们吸收LESS的精子..不...是精华了....

   原来                           使用嵌套

   #header {                     #header {
     color: black;                    color: black;
   }                                  .navigation {
   #header .navigation {                  font-size: 12px;
     font-size: 12px;                 }
   }                                  .logo {
   #header .logo {                        width: 300px;
     width: 300px;                    }
   }                              }   

学会这种写法，妈妈再也不用担心我写错层级类名了

* &符号:代表this，也就当前这一层的元素

   less文件                          CSS文件

   .clearfix {                      .clearfix {
     display: block;                    display: block;
     zoom:;                           zoom:;
                                      }
     &:after {                    .clearfix:after {
       content: " ";                content: " ";
       display: block;              display: block;
       font-size:;                font-size:;
       height:;                   height:;
       clear: both;                 clear: both;
       visibility: hidden;          visibility: hidden;
     }                            }
   }    

* @Media, @supports and @document

   less文件                             CSS文件

   .screen-color {                     @media screen {
     @media screen {                     .screen-color {
       color:green;                        color: green;
       @media(min-width:768px){             }
         color:red;                    }
       }                               @media screen and (min-width: 768px) {
     }                                   .screen-color {
     @media tv {                           color: red;
       color: black;                     }
     }                                 }
   }                                   @media tv {
                                                 .screen-color {
                                                    color: black;
                                                  }
                                                }  

* #
less文件 CSS文件

#a { #a {
color: blue; color: blue;
@font-face { }
src: made-up-url; @font-face {
} src: made-up-url;
padding: 2 2 2 2; }
} #a {
padding: 2 2 2 2;
}
-------------------------------------注释--------------------------------------------------------------
"//"用于注释内容，在CSS文件中不可见
/**/，在CSS文件中可显示，但是被注释的

---------------------------------------------------------------------------------------------------
* Function

    less文件                                        CSS文件

    @base: #f04615;                                 .class {
    @width: 0.5;                                          width:50%;
    .class {                                                color:#f6430f;
       width:percentage(@width);                        background-color: #f8b38d;
       color:saturate(@base,5%);                     }
       background:spin(lighten(@base,25%),8);
    }

本人也只是学习了一点less的皮毛，less有很多内容，但个人感觉不是很实用，在使用过程中，变量、函数、嵌套，是用的最多的，限于自身的长度，不能再深入了，下面是个人编写的公共less库，

在个人的less文件中，引入common.less库， @import url(common.less);   然后调用里面的参数即可，也可以结合自身习惯编写自己的公共库

个人common.less文件

@charset 'utf-8';
//常用变量及样式定义，作为一个工具Less被其他Less
//字体大小:默认14px
//去除a和label的虚线
.remove_dotted(){
  a,label {blr:~'expression(this.onFocus=this.blur())'}
  a,label {outline:none;}
}
.font(@size:14px){
    font-size:@size;
}
.h100(){
    height:100%;
}
.w100(){
    width:100%;
}
//边框设置
.border(@w:1px,@c:#eee){
    border:@w solid @c;
}
//定位
.pos(r){
    position:relative;
}
.pos(a){
    position:absolute;
}
.pos(f){
    position:fixed;
}
//背景图片,.bg("..images/1.png");
.bg(@url){
    background:url(@url) no-repeat;
}
//浮动,div{.fr;}
.fl(){
    float:left;
}
.fr(){
    float:right;
}

.list-sn(){
    list-style:none;
}
//垂直居中
.pos-box-cc(@w,@h,@pos:absolute){
    width:@w;
    height:@h;
    left:50%;
    top:50%;
    margin:-@w/2 0 0 -@h/2;
}
.bc(){
    margin:0 auto;
}
//文字居中
.tc(){
    text-align:center;
}
//文字垂直居中
.tcc(@h){
    text-align:center;
    line-height:@h;
}
.l-h(@h){
    height:@h;
    line-height:@h;
}
//display
.d-b(){
    display:block;
}
.d-i(){
    display:inline;
}
.d-ib(){
    display:inline-block;
    *display:inline;
    *zoom:;
}
.d-t(){
    display:table;
}
.d-n(){
    display:none;
}
.t-n(@p:none){
    text-decoration:@p;
}
.tc(){
    text-align:center;
}
.tl(){
    text-align:left;
}
.tr(){
    text-align:right;
}
//圆角
.radius(@r){
    -webkit-border-radius:@r;
       -moz-border-radius:@r;
            border-radius:@r;
}

//三角形
.triangle(top,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent transparent @c transparent;
    border-style:dashed dashed solid dashed;
}

.triangle(bottom,@w:5px,@c:#eee){
    border-width:@w;
    border-color:@c transparent transparent transparent;
    border-style:solid dashed dashed dashed;

}
.triangle(left,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent @c transparent transparent;
    border-style:dashed dashed solid dashed;
}

.triangle(right,@w:5px,@c:#eee){
    border-width:@w;
    border-color:transparent transparent transparent @c;
    border-style:solid dashed dashed dashed;

}
.triangle(@_){
    width:;
    height:;
    overflow:hidden;
}
.clearfix(){
  *zoom:;
  &:before,
  &:after{
    display:table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

.box-sizing(@box){
  -webkit-box-sizing:@box;
     -moz-box-sizing:@box;
      -ms-box-sizing:@box;
       -o-box-sizing:@box;
              sizing:@box;
}
.box-shadow(@shadow){
  -webkit-box-shadow:@shadow;
     -moz-box-shadow:@shadow;
      -ms-box-shadow:@shadow;
       -o-box-shadow:@shadow;
              shadow:@shadow;
}

//过度
.transition(@trans){
    -webkit-transition:@trans;
       -moz-transition:@trans;
        -ms-transition:@trans;
         -o-transition:@trans;
            transition:@trans;
}
.transform-origin(@origin){
    -webkit-transition-origin:@origin;
       -moz-transition-origin:@origin;
        -ms-transition-origin:@origin;
         -o-transition-origin:@origin;
            transition-origin:@origin;
}
.transform(@transform){
    -webkit-transform:@transform;
       -moz-transform:@transform;
        -ms-transform:@transform;
         -o-transform:@transform;
            transform:@transform;
}
.create3d(@h){
  -webkit-perspective:@h;
          perspective:@h;
}
.use3d(){
    -webkit-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

//动画
.animation(@as){
    -webkit-animation:@as;
       -moz-animation:@as;
         -o-animation:@as;
            animation:@as;
}
.trans3d(){
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
            transform-style:preserve-3d;
}
.trans-origin(@to){
  -webkit-transform-origin:@to;
     -moz-transform-origin:@to;
          transform-origin:@to;
}