LESS

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
less的使用 ：在HBuilder上创建一个less文件，然后保存，就会生成一个相对应的css文件；在使用的时候，只需在HTML文件中引入css文件，less的使用是为了我们在写css样式时避免写太多类名，和写后代选择器时容易混淆。
如下例：

html文件

<div id="content">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="my">
        <span>世界那么大，我想去看看</span>
    </div>
</div>
<div class="wrap">
    <ul>
      <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>
</div>

less文件

#content{
    height: 150px;
    background-color:gray ;
    ul{
        list-style: none;
        margin-bottom: 10px;
        background-color: red;
        li{
            height:20px ;
            background: gold;
            margin-bottom: 10px;
        }
    }
    .my{
        color: white;
        span{
            font-family: "agency fb";
            font-size: 20px;
        }
    }
}
.wrap{
    border: 5px solid black;
    ul{
        list-style: none;
        background: greenyellow;
        li{
            height: 20px;
            background: cadetblue;
            margin: 5px;
        }
    }
}

最后生成的css文件

#content {
  height: 150px;
  background-color: gray ;
}
#content ul {
  list-style: none;
  margin-bottom: 10px;
  background-color: red;
}
#content ul li {
  height: 20px ;
  background: gold;
  margin-bottom: 10px;
}
#content .my {
  color: white;
}
#content .my span {
  font-family: "agency fb";
  font-size: 20px;
}
.wrap {
  border: 5px solid black;
}
.wrap ul {
  list-style: none;
  background: greenyellow;
}
.wrap ul li {
  height: 20px;
  background: cadetblue;
  margin: 5px;
}

最后结果显示：

D560F51C-CD32-4A11-9FD8-7F37F1F025BB.png

变量

设置变量只需写 @first:100;
如下例：

 @first:"100px";//没有所谓的字符串的拼接，只有数字的加减
@second:100+200;
#content{
  width:@first;//100px
  // height:@second;//显示是300，但是height 是要加 px的，这样写是不对哒，因此我们将它注释掉
}

这样的写法其实我个人并不喜欢，但这样的写法具有通用性，只要变量改变，其他引用变量的地方都会改变

混合写法

例如：我们通常都会设置圆角，在less里面我们可以进行以下操作

less文件

//.radius {
  //  border_radius:10px;
//}//固定值
//当我们想要不同值的时候，可以进行传参
.radius(@myRadius) {
    border_radius:@myRadius;
}
//想要传多个参数,参数之间用分号隔开
.color(@myColor;@myBgcolor){
    color:@myColor;
    background-color:@myBgcolor;
}
#content{
    //.radius;
    .radius(50px);
    .color(red;yellow);
}
#first{
   //.radius;
  .radius(20px);
  .color(green;yellow);
}

上面的写法就是将所需要设置的属性单独写成一个类，需要设置相同属性时，直接引用就行了，上诉写法可称为模块化写法

嵌套规则

1. 根据标签的嵌套来设定

#wrap{
    .class{

    }
}

2. &符号的使用

//hover
#wrap{
    &:hover{//针对伪元素
        background:blue;
    }
}
//针对串联标签
#wrap{
    &#btn{
        color:red;
    }
}

less的语法还有很多 可以查看less中文文档

目前我们的嵌套并不是特别多，当我们的html文件涉及5，6，7 或者更多层嵌套时，less的写法就可以看出来它的便利性