初学LESS

1. Less 是什么
   a) Less 是一种动态样式语言，属于CSS预处理语言一种，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护
2. 编译Less 的工具
   下载网站 http://koala-app.com/index-zh.html
3. Less语言特性
   a) 变量
   i. 定义 ： @变量名 ： 值

.width{
    @wid:100px;

    width:@wid;
}

            编译后

.width {
    width: 100px;
}

b) 混合
i. 定义 ： 一个class 去调另一个 class
ii. 用法 ：

.border{
    background: red;
}

.div{
    color: green;
    .border 
}

            编译后

.border {
  background: red;
}
.div {
  color: green;
  border: solid 5px pink;
  background: red;
}

c)  带参数混合（多参数直接用逗号隔开）
        i.  使用定义一个带参数的属性集合，类似于js中的方法
            无初始值的带参混合

.border-radius(@radius:20px){
    border-radius: @radius;
}

.button{
    .border-radius(6px);
}

            编译后

.button {
  border-radius: 6px;
}

            有初始值的带参混合

.border-radius(@radius:20px){
    border-radius: @radius;
}

.button{
    .border-radius();
}

            编译后

.button {
  border-radius: 20px;
}

d)  匹配模式
        i.  定义 根据传递参数的不同 选择不同的css 类似于编程中的switch 
        ii. 使用

//上
.triangle(top,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style: dashed dashed solid dashed
}
//左
.triangle(left,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed
}
//右
.triangle(right,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid
}
//下
.triangle(buttom,@width:5px,@color:#ccc){
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed
}

        调用

.sanjiao{
    .triangle(right,100px);//right 可以变化  根据传入的不同  调用不用的triangle方法
}

        编译后生成

.sanjiao {
  border-width: 100px;
  border-color: transparent transparent transparent #cccccc;
  border-style: dashed dashed dashed solid;
}

        还有一种加上

//@_ 表示  不管选择哪一个  这个里面的代码都会带入
.triangle(@_,@width:5px,@color:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
}

        @_ 表示不管选哪一个  都会加上这个样式
        新生成的css

.sanjiao {
  border-width: 100px;
  border-color: transparent transparent transparent #cccccc;
  border-style: dashed dashed dashed solid;
  width: 0;
  height: 0;
  overflow: hidden;
}

e)  嵌套   （& 表示父级的名字）
        i.  定义 ： 顾名思义这里就是层级的意思
        ii. 使用

//嵌套  & 代表上一个选择器
.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;

    li{
        height: 30px;
        padding: 0 10px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;
    } 

    a{
        float: left;

        &:hover{
            color: red;
        }
    }

    span{
        float: right;
    }

}

        编译后

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
}
.list li {
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}

f)  避免编译 ：~ 
g)  导入文件 ：@import("xx")  默认less文件  @import (less) ("xx.css")
h)  Less也可做运算