Less（二）----变量/混合

变量

      变量是延迟加载的，在使用前不一定要预先声明。
      在定义一个变量两次或多次时，只会使用最后定义的变量，less会从当前的作用域中向上搜索。并且取最新定义的变量值作为自己的值。

1.普通的变量

（1）定义方式：@
（2）实例：

/*less*/
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
/*编译后*/
#header {
  width: 10px;
  height: 20px;
}

2.作为选择器和属性名使用

（1）使用时将变量以  @{变量名}  的方式使用。
（2）实例：

/*less*/
@mySelector:width;
.@{mySelector}{
   @{mySelecor}:960px;
   height:500px;
}
/*编译后*/
.width{
   width:960px;
   height:500px;
}

3.作为URL使用

（1）使用双引号将变量的值括起来，使用时同样将变量以@{变量名}的方式使用
（2）实例：

/*less*/
@myUrl "http://www.maiz.com/static/images";
body{
   background:#4cdca9 url("@{myUrl}/logo.png") no-repeat
}
/*编译后*/
body{
   background:#4cdca9 url("http://www.maiz.com/static/images/logo.png") no-repeat
}

混合

       混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

普通混合

实例：

/*less*/
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered();
    // .bordered;//两种都可以使用
}
/*编译过后*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

不带输出的混合

      如果不想让混合集输出到你的样式中。就在混合集的名字之后加上一个括号。
实例：

/*less*/
.bordered() {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered();
    // .bordered;//两种都可以使用
}
/*编译后*/
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

带选择器的混合

       &:表示当前选择器的父级。
实例：

/*less*/
.my-hover-mixin(){
    &:hover{
        border: 1px solid #f00;
    }
}
button{
    .my-hover-mixin;
}
/*编译后*/
button:hover {
  border: 1px solid #f00;
}

带参数的混合

（1）不带默认值

/*less*/
.border(@color){
    border: 1px solid @color;
}
h1{
    &:hover{
        .border(#f00);
    }
}
/*编译后*/
h1:hover {
  border: 1px solid #f00;
}

（2）带默认值

/*less*/
.border(@color:#f00){
    border: 1px solid @color;
}
h1{
    &:hover{
    	/*不传值*/
        .border();
    }
    /*传值*/
    .border(#00f);
}
/*编译后*/
h1 {
  border: 1px solid #00f;
}
h1:hover {
  border: 1px solid #f00;
}

（3）带多个参数

        A.一个组合可以带多个参数，参数之间可以用分号分割。
        B.如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值。如果传参的括号里面既有“，”又有“；”，那么会把“；”前面的看作一个整体，传给一个参数值。
实例：

/*less*/
.mixin(@color:#f00;@padding:5px;@margin:2px;){
    color: @color;
    padding:@padding;
    margin: @margin;
}
.div1{
    .mixin();
}
.div2{
    .mixin(#0ff);
}
.div3{
    .mixin(#00f,10px);
}
.div5{
    .mixin(#f0f;2px 2px 2px 10px;15px);
}
/*编译后*/
.div1 {
  color: #f00;
  padding: 5px;
  margin: 2px;
}
.div2 {
  color: #0ff;
  padding: 5px;
  margin: 2px;
}
.div3 {
  color: #00f;
  padding: 10px;
  margin: 2px;
}
.div5 {
  color: #f0f;
  padding: 2px 2px 2px 10px;
  margin: 15px;
}

（4）定义多个具有相同名称和参数数量的混合—重载

/*less*/
.mixin(@color){
    color-1: @color;
}
.mixin(@color;@padding){
    color-2: @color;
    padding-1: @padding;
}
.mixin(@color;@padding;@margin;){
    color-3: @color;
    padding-2:@padding;
    margin: @margin;
}
.some .selector .div1{
    .mixin(#880);
}
.some .selector .div2{
    .mixin(#880,2);
}
.some .selector .div3{
    .mixin(#880,2,4);
}
/*编译后*/
.some .selector .div1 {
/*因为只用到了color,没有用到padding和margin,所以只选择了第一个*/
  color-1: #880;
}
.some .selector .div2 {
/*因为只用到了color/padding,没有用到margin,所以只选择了第二个*/
  color-2: #880;
  padding-1: 2;
}
.some .selector .div3 {
/*因为所有值都用到了,所以只选择了第三个*/
  color-3: #880;
  padding-2: 2;
  margin: 4;
}

特殊情况：如果带有默认值，会出现合并混合的情况。----所以不建议在此情况下带有默认值。

/*less*/
.mixin(@color){
    color-1: @color;
}
.mixin(@color;@padding:2){
    color-2: @color;
    padding-1: @padding;
}
.mixin(@color;@padding;@margin:2;){
    color-3: @color;
    padding-2:@padding;
    margin: @margin;
}
.some .selector .div1{
    .mixin(#880);
}
.some .selector .div2{
    .mixin(#880,3);
}
.some .selector .div3{
    .mixin(#880,5,4);
}
/*编译后*/
.some .selector .div1 {
  color-1: #880;
  color-2: #880;
  padding-1: 2;
}
.some .selector .div2 {
  color-2: #880;
  padding-1: 3;
  color-3: #880;
  padding-2: 3;
  margin: 2;
}
.some .selector .div3 {
  color-3: #880;
  padding-2: 5;
  margin: 4;
}

（5）命名参数

        引用混合时可以通过参数名称而不是参数位置。任何参数都可以通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数。

/*less*/
.mixin(@color;@padding:3;@margin:2;){
    color: @color;
    padding:@padding;
    margin: @margin;
}
.some .selector .div1{
    .mixin(@margin:10px;@color:#fff);
}
.some .selector .div2{
    .mixin(#ff0;@margin:10px;@padding:10px;);
}
/*编译后*/
.some .selector .div1 {
  color: #fff;
  padding: 3;
  margin: 10px;
}
.some .selector .div2 {
  color: #ff0;
  padding: 10px;
  margin: 10px;
}

（6）@arguments变量

        A.@arguments代表所有的可变参数
        B.注意：
                a.参数的先后顺序就是括号内的参数的先后顺序。
                b.使用的赋值，值的位置是一一对应的，不能跳着写，要把原来的默认值也写上。

/*less*/
.minix(@x;@color){
    border:21px @arguments;
}
.div1{
    .minix(solid,red);
}
/*编译后*/
.div1 {
  border: 21px solid red;
}

匹配模式

（1）传值的时候定义一个字符，在使用的时候是用哪个字符就用那条规则。
（2）实例:

/*less*/
.border(all,@w:5px){
    border-radius: @w;
}
.border(t_l,@w:10px){
    border-top-left-radius: @w;
}
.border(t_r,@w:15px){
    border-top-right-radius: @w;
}
.footer1{
    .border(all)
}
.footer2{
    .border(t_l)
}
.footer3{
    .border(t_r)
}
/*编译后*/
.footer1 {
  border-radius: 5px;
}
.footer2 {
  border-top-left-radius: 10px;
}
.footer3 {
  border-top-right-radius: 15px;
}

得到混合中变量的返回值

/*less*/
.average(@x;@y){
    @average:((@x + @y)/2);
}
div{
    .average(32px, 33px);
    padding: @average;
}
/*编译后*/
div {
  padding: 32.5px;
}