Less的使用

Less为css预处理器

首先先去下载一个koala编译器软件，然后运行打开

新建一个项目目录，在css文件夹中新建一个后缀为less的文件，然后拉入koala软件中，然后运行

，你的css文件夹中就会多出一个css文件

然后就可以编写less文件了，编写过程中可以在css文件里查看详细信息。

以下是less文件的知识点

@charset "utf-8";
/*会被编译*/
//不会被编译
@test_width:500px;
@test_height:500px;
body{
background-color: #ccc;
}
/*混合*/
.box{
width:@test_width;
height: @test_height;
background-color:yellow;
.border;
}
.border{
border:5px solid pink;
}
.box2{
.box;
margin-top:50px;
}
/*混合-可带参数*/
.border_02(@border_width){
border:solid #000 @border_width;
}
.test_hunhe{
.border_02(30px);
}
/*混合-默认带参数*/
.border_03(@border_width:40px){
border:solid #000 @border_width;
}
.test_hunhe2{
.border_03(20px);
}
/*混合的例子*/
.border_radius(@raidus:5px){
-webkit-border-radius: @raidus;
-moz-border-radius: @raidus;
border-radius: @raidus;
}
.radius_test{
width: 100px;
height: 40px;
background-color:green;
.border_radius(10px);
}
//普通写法
/*.sanjiao{
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color:transparent transparent transparent red;
border-style:dashed dashed dashed solid; //dashed解决ie有背景的问题
}*/
/*匹配模式*/
//边框实现三角形
.triangle(left,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.triangle(right,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
.triangle(top,@w:50px,@c:#f00){
border-width: @w;
border-color:@c transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
.triangle(bottom,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent transparent @c transparent ;
border-style: dashed dashed solid dashed ;
}
.triangle(@_,@w:50px,@c:#f00){
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(right);
}
/*匹配模式-定位例子*/
.pos(r){
position: relative;
}
.pos(f){
position:fixed;
}
.pos(a){
position:absolute;
}
.pos(s){
position:statice;
}
.pipei{
width: 50px;
height: 50px;
left: 0;
top: 0;
background-color: #0f0;
.pos(f);
}
/*运算*/
@test_01:300px;
.box_02{
width:(@test_01 - 20)*5;
}
/*嵌套*/
.list{
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
padding: 0 10px;
}
a{
float:left;
//& 代表他的上一层选择器
&:hover{
color:#FF0000;
}
}
span{
float:right;
}

}
/*@arguments*/
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);
}
/*避免编译*/
.test_03{
width:~'calc(300px - 30px)';
}

//!important
.test_arguments{
.border_arg(40px) !important;
}

花了几个小时终于搞定了，还有待实践；