Less 既可以在客户端编译也可以在服务端编译；在客户端编译时，能够看到实时的样式效果，且客户端编译不会保存编译后的产出结果，而刷新浏览器时会重新编译一次；在服务端编译时，可以将编译后的产出结果保存为静态的CSS文件。
Less能够提高书写CSS代码的效率，可视为CSS的编程语言。它包含了内置的函数，变量等等。这些特性使代码重用、维护等等更为方便。
（1）在客户端编译示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet/less" href="styles/project.less"/>
<script src="less.min.js"></script>
</head>
<body>
<header>the header</header>
<section>this is a paragraph</section>
<footer>the footer</footer>
</body>
</html>其他的Less文件，可以通过@import指令导入到project.less文件中。
（2）在服务端编译
服务端的编译需要借助Node.js，并且通过npm安装相应的less模块：
npm install --global less
lessc project.less > project.css会将project.less编译后的内容保存在project.css中。
lessc -x project.less > project.css
Less 语法
（1）变量声明
@color: red;
（2）mixins
声明：
.rounded-corners() {
border-radius: 5px;
}
使用：
footer {
.rounded-corners();
}
（3）复用已有class
.class1 {
property1: value1;
}
.class2 {
.class1
property2: value2;
}
此种方式中，.class1也会被编译，如果采用以下方式，.class1 mixin就不会被编译到CSS源代码中：
.class1() {
property1: value1;
}
（4）带默认参数的mixin
.colored-and-rounded(@background-color: red) {
.rounded-corners();
background-color: @bakcground-color;
}
（5）多层嵌套
section {
h1 {}
p{}
}
（6）数学运算
@basic-width: 800px
@color: yellow;
.container {
width: @basic-width * 2/3
}
p {
color: @color + #111;
}
（7）内置函数
darken()
contrast()
isnumber()
iscolor()
（8）命名空间
#namespace {
.mixin() {
color: red;
}
}
.mixin() {
color: blue;
}
footer {
#namespace > mixin;
}
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
