# less（less is more, Than css）

63 阅读 0 评论 42 点赞

我是靠谱客的博主矮小画板，最近开发中收集的这篇文章主要介绍# less（less is more, Than css），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

---

可以加入变量和运算。
less有多种编译环境，桌面的编译工具：koala编译。node.js库编译。浏览器编译。把less文件编译成css。
**less注释**
>在less中，有两种注释，<pre>/**/和//，前者在编译时会被保留，后者不被编译</pre>

**变量**

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

@test：300px;

.box{
width:@test;
height:@test;
background-color:#CCC;
}
</pre>

**混合**
>写 css 遇到可以重用的东西，重用样式，在less里的处理方法如下
<pre>
@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);
}
</pre>
**匹配模式**
>相当于 js 中的 if，但不完全是，满足条件才能匹配
<pre>
//用 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);
</pre>
**运算**
>less中是可以有运算的
<pre>
@test_01:300px;
.box_02{
width:test_01+20*5;
}
</pre>
**嵌套规则**
>当我们写列表性的东西时，可以这样写。但是要尽量少去匹配元素。
<pre>
.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;
}
}
}
}
</pre>
**@srguments变量**
<pre>
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
//arguments用例
.test_arguments{
.border_arg();
}
</pre>
**避免编译**
>有的时候我们会写一些 less 不认识的文字，如滤镜，所以需要避免编译。imporent
<pre>
//避免编译
test_03{
width:~'calc(300px-30px)';
}

//important
.test_important{
border_radius()!important;
}
</pre>