十分钟入门less

一、基础语法

1、变量
使用@可以定义less变量

@bule:#eee;  // 声明变量
 .login-container{
      height:300px;
      background:@bule;  //使用变量
  }

2、混合
混合就是先定义一个一个样式，然后在另外一个样式中使用
1、不带参数

 .border{
       border:2px solid red;
      }
  .login-container{
      height:300px;
      background:@bule;
      .border;
  }

2、带参数的混合
带默认参数的混合

  .border(@border-width:10px){
       border:@border-width solid red;
    }
  .login-container{
      height:300px;
      .border();
  }

不带默认参数的混合

  .border(@border-width){
       border:@border-width solid red;
    }
  .login-container{
      height:300px;
      .border(10px);
  }

3、嵌套规则

 ul{
    background: #fff;                              
    li{
      padding:10px;
      border-bottom:2px solid pink;
    }
  }

编译后的css文件是这样的

 ul{
    background: #fff;                              
  }
  ul  li{
      padding:10px;
      border-bottom:2px solid pink;
    }

& :表示上一层选择器

 a{ 
      color: red;
      &:hover{  //&表示上一次选择器a
        color: burlywood
      }
    }