文章标题

less（less is more, Than css）

标签（空格分隔）： 实习笔记

可以加入变量和运算。

less有多种编译环境，桌面的编译工具：koala编译。node.js库编译。浏览器编译。把less文件编译成css。

less注释

在less中，有两种注释，

/**/和//，前者在编译时会被保留，后者不被编译

变量

在less里定义变量，用@符号定义，然后就可以用变量了

如

@test：300px;

.box{
width:@test;
height:@test;
background-color:#CCC;
}

混合

写 css 遇到可以重用的东西，重用样式，在less里的处理方法如下

@test：300px;

.box{
width:@test;
height:@test;
background-color:#CCC;

.border;
}

.box2{
.box;
margin-left:100x;
}
//带参数的混合的运用
.test_hunhe{
.border_02(30px);
}

//带默认值的参数，默认为10，但是有特殊的时候可以在border_03（这里带值）
.test_hunhe_03{
border_03();
}
.border{
border:solid 5px pink;
｝

//带参数的混合
border_02(@border_width){
border:solid #CCC @border_width;
}

//混合，带默认参数
.border_03(@border_width:10px){
border:solid green @border_width;
}
//混合例子
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;

.border_radius();
}
//不希望使用默认值
.radius_test2{
width:100px;
height:40px;
background-color:green;

.border_radius(10px);
}

匹配模式

相当于 js 中的 if，但不完全是，满足条件才能匹配

//用 css 画三角
.sanjiao{
width:0;
height:0;
overflow:hidden;

border-width:10px;
border-color:red  transparent red transparent;
border-style:solid;
}

//匹配模式
.triangle(top,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent transparent @c transparent ;
border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent transparent transparent  @c;
border-style:dashed dashed dashed solid;
}
.triangle(bottom,@w:5px;@c:#CC){
border-width:@w;
border-color: @c transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent  @c transparent transparent ;
border-style:dashed  solid dashed dashed;
}
//无论匹配谁都必须带上的，比如选了.triangle(top）；可以这样写
.triangle(@_,@w:5px;@c:#CCC){
width:0px;
height:0px;
overflow:hidden;
}
.sanjiao{
.triangle(top);
}

//匹配模式的定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
.pipei{
width:200px;
height:200px;
background-color:green;
pos(a);

运算

less中是可以有运算的

@test_01:300px;
.box_02{
width:test_01+20*5;
}

嵌套规则

当我们写列表性的东西时，可以这样写。但是要尽量少去匹配元素。

.list{
width:600px;
margin:0;
padding:0;
list-style:none;

li{
height:30px;
line-height:30px;
background-color:pink;
margin-bootom:5px;

a{
float:left;
//代表他的上一层选择器
&：hover{
color:red;
}
}
}
}

@srguments变量

.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
//arguments用例
.test_arguments{
.border_arg();
}

避免编译

有的时候我们会写一些 less 不认识的文字，如滤镜，所以需要避免编译。imporent

//避免编译
test_03{
width:~'calc(300px-30px)';
}

//important
.test_important{
border_radius()!important;
}