Less
1:less是css预编译语言，使用需要使用编译器来进行编译
2：Koala编译，使用的时候将CSS文件夹拖入进去，考拉会自动编译生成.css文件，点击less文件设置输出路径到同名的，css文件，考拉只是将less文件编译成css文件本质上我们还是需要引入css文件
3：less注释 // 这个注释不会被编译 /**/会被编译
4:less变量 类似于定义一个变量 int A =10;
@test_width :200px; //声明一个变量 引用这个变量
.box1{
@test_width;
height: 300px;
background-color: royalblue;
}
5:less混合（公用的样式）
body{
background-color: red;
.boder;//直接引用
.boder(10px)://调用混合参数
}
//混合
.boder{
border: 2px solid aquamarine;
}
.border_01(@border_width){ //可以带参数类似于函数
border: @border_width solid aquamarine;
}
.border_01(@border_10px){ //默认值
border: @border_width solid aquamarine;
}
6:匹配模式
.trangle(top,@10px,@c:#fff){
0px;
height: 0px;
overflow: hidden;
border- @width;
border-color: transparent transparent @c transparent;
border-style: solid;
}
.trangle(left,@10px,@c:#fff){
0px;
height: 0px;
overflow: hidden;
border- @width;
border-color: transparent @c transparent transparent;
border-style: solid;
}
.sanjiao{
.trangle(left);
}
//类似于混合，可以根据第一个参数进行匹配（三角形的案例）
.trangle(top,@10px,@c:#fff){
border- @width;
border-color: transparent transparent @c transparent;
border-style: solid;
}
.trangle(left,@10px,@c:#fff){
border- @width;
border-color: transparent @c transparent transparent;
border-style: solid;
}
.trangle(@_,@10px,@c:#fff){
0px;
height: 0px;
overflow: hidden; //是匹配的公用样式
@_固定格式
}
7:运算
@test_a:200px;
.box1{
@test_a - 20; //180px 可以进行变量的运算
}
8: 嵌套（很实用）
&>a // &表示的是上一次选择器 //如下这样的结构
<ul class="nav">
<li><a href="">投票</a></li>
<li><a href="">主题</a></li>
<li><a href="">购物</a></li>
<li><a href="">娱乐</a></li>
</ul>
.nav{
960px;
height: 80px;
&>li{
list-style: none;
200px;
margin-left: 20px;
float: left;
&>a{
display: block;
color: black;
text-decoration: none;
&:hover{
color: red;
}
}
}
}//less 可以直接嵌套编写
//less 对应的css,编写变得简，便于层级内的编写
.nav {
960px;
height: 80px;
}
.nav > li {
list-style: none;
200px;
margin-left: 20px;
float: left;
}
.nav > li > a {
display: block;
color: black;
text-decoration: none;
}
.nav > li > a:hover {
color: red;
}
9:@arguments //代表传递所有参数例如
.boder_03(@w:2px,@c:red,@xx:solid){
border: @arguments;
}
等价于：border: 2px #ff0000 solid;