css的Less好比是js的Jquery，能够让人们更方遍快速的运用css，使css代码更简约，能够削减反复的代码，削减开辟人员的工作量。
Less CSS是一种动态款式言语，属于CSS预处理言语的一种，它运用相似CSS的语法，为CSS给予了动态言语的特征，如变量、继续、运算、函数等，更轻易CSS的编写和保护。
Less中文手册：less.bootcss.com
二、编译东西
1.Koala：国人开辟的LESS/SASS编译东西
下载地点：
2.Node.js库
3.浏览器端运用
三、koala设置及运用
1.新建后缀为.less文件：index.less
头部写上：@charset "utf-8"; //设定字符集
2.把文件夹拖到koala中，设置输出途径为style下的index.css
运用koala举行编译，然后就生成了一个index.css文件。
3.以后我们只需编辑index.less文件即可。
四、解释
1./*编译后会被保存*/
2.//编译后不会被保存
五、变量
1.设定变量：
@text_width: 300px;
2.运用变量：示例以下
<div class="box"></div>
.box{
width: @text_width;
height: @text_width;
background: #000;
}
六、夹杂
1.夹杂简介：与原有的在class中新追加class的要领有所不同（原有<div class="box border"></div>），运用Less的夹杂功用后，只需声明.border后，在.box中加 入.border;即可。
运用示例一：
<div class="box"></div>
.box{
width: @text_width;
height: @text_width;
background: #000;
.border;
}
.border{
border: 5px solid yellow;
}
运用示例二：新增一个box2，然则它和box1只要一点点纤细的区分，能够直接拿来box1运用，然后加上它自己的款式。
.box2{
.box1;
margin-left: 100px;
}
2.夹杂是能够带参数的
在index.less中运用带参数的值，在border_02背面加一个（），内里声明一个变量；
然后传入参数30px。
在编译后的index.css文件中，带参数的变量不显现
3.夹杂也能够带默认值
在border_03背面加一个（），内里声明一个变量，变量背面附一个初始值“:10px”；
假如不想用默认值，只需在text_hunhe下的border_03的()中写入值即可。
默认值必需带（），不然会报错。
4.夹杂高等运用示例，兼容性也能够运用
<div class="radius_test"></div>
在编译后的index.css文件中，展现以下
七、婚配形式
1.简介：相当于js中的if，但不完全是
2.示例
先引见一个画倒三角的要领
<div class="sanjiao"></div>
.sanjiao{
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
婚配形式示例一：
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){ // @_ 是牢固花样，示意不论你婚配到谁，都邑带上这些内容
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(right,100px);
}
婚配形式示例二：
婚配形式定位
.pos(r){position:relative;}
.pos(a){position:absolute;}
.pos(f){position:fixed;}
.posi{
width: 100px;
height: 100px;
background: blue;
.pos(r);
}
八、运算
1.less中的运算能够是任何数字、色彩、变量，运算要包裹在括号中。如：+ - * /
2.示例以下：
@test_01:300px;
.box_02{
width: (@test_01 - 20) * 5; //未强迫划定必须要带px单元，只需有一个带即可
color: #ccc - 10; //不太常用到
}
九、嵌套划定规矩
1.示例
原css
.list{}
.list li{}
.list a{}
.list span{}
运用Less嵌套：
.list{
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;
font-size: 16px; li{
height: 30px;
line-height: 30px;
background: blue;
margin-bottom: 5px;
padding: 0 10px;
}
a{
float: left;
color: #000;
&:hover{ //&代表上一层选择器
color: red;
}
}
span{
float: right;
}
}
十、arguments变量
.border_arg(@w:30px,@c:#ccc,@xx:solid){border:@arguments} //省了一点点事儿，懒人必备
.test_arguments{.border_arg(40px);}
十一、防止编译、!important
1.防止编译：在我们须要输入一些不正确的css语法或许运用一些less不认识的专有语法时运用。在字符串前加上一个~即可
.test_03{
width: ~'calc(300px - 30px)'; //~'...'防止编译，把单引号里的内容根据原样传给浏览器
}
2.!important关键字：合适用来调试，平常不会用到
.test_important{
.box !important; //给一切款式加上!important
}
以上就是什么是Less？koala设置及运用的细致内容，更多请关注ki4网别的相干文章！
