CSS是一门非程序式语言，缺少逻辑性，不便于维护
LESS在CSS现有语法的基础上，为CSS加入程序式语言的特性
引入了变量、混入、运算、函数等功能，大大简化CSS的编写，降低了CSS的维护成本
LESS包含一套语法和一个解析器，用户用它的语法生成样式规则，这些规则通过解析器后生成CSS文件
1.变量
以{}划分作用域，变量从里往外进行查找
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}2.混入（实现多重继承）
将一个类嵌套到另一个类中使用
// 定义一个样式选择器
.roundedCorners(@radius:5px) { //默认值为5
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}混入参数
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
arguments参数：表示所有变量：
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}支持命名空间，防止重名问题：
#mynamespace {
.home {...}
.user {...}
}嵌套规则：
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}&：
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}3.运算及函数
对数值型value（如颜色、数字）进行四则运算
专门针对color的一组函数
lighten(@color, 10%); // 返回比原色亮10%的颜色
darken(@color, 10%); //返回比原色暗10%的颜色
saturate(@color, 10%); //返回比原色饱和10%的颜色
desaturate(@color, 10%);// 返回比原色不饱和10%的颜色
fadein(@color, 10%); // 返回比原色不透明10%的颜色
fadeout(@color, 10%); // 返回比原色透明10%的颜色
spin(@color, 10); // 比原色大10度色调比
spin(@color, -10); // 比原色小10度色调比
//使用
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
4、注释
与JS一样
注意：单行注释不会出现在编译后的CSS文件中，若需要保留注释，使用多行注释
5.使用方式：
客户端：
//注意文件的先后顺序
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="less.js"></script>
实际项目开发中常用：
编写LESS文件后，直接将它编译成CSS文件，然后引入页面