Less 简介
简单来说，Less 就是让你在网页设计的时候，可以更方便地写 CSS 的工具。
Less官网的说明：
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算，函数.
LESS 既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，
也可以借助Node.js或者Rhino在服务端运行。
也就是说，你可以透过 Less 的语法使用 变量, 继承, 运算 和函数 这些工具，
再通过编译之后，less 就可以转成一般的 CSS，
于是让设计 CSS 这件事可以更加地有弹性。
// LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } 编译出来的 CSS: #header { color: #4D926F; } h2 { color: #4D926F; }=====================================
混合
mixins让你可以重覆利用某些样式的宣告，
你可以在 A 样式里面包括另一个 B class,
所有被 B class 的样式都会被嵌入进来 A 这个样式设定。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
那如果我们现在需要在其他class中引入那些通用的属性集，
那么我们只需要在任何class中像下面这样调用就可以了:
#menu a { color: #111; .bordered; }
下面是转出来的 CSS:
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }
===========================================
带参数混合
这个最好用的地方就是在简化一些比较不好写的 css, 例如 CSS3 的圆角设定，
目前因为浏览器的语法尚未统一，你需要写:
通过Less, 你只要写：
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
=======================================
less 提供的主要功能
arguments 变量
@arguments包含了所有传递进来的参数。
例如 CSS3 的阴影设定:
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } #nav{ .box-shadow(2px, 5px); } #nav{ box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000; }===============================
函数 & 运算
通常在设计 button 或是 border 的样式的时候，我们常常会需要一个
跟原本差不多的颜色。可能是亮一点点、暗一点点、或是鲜艳一点点
（例如：当做 button 一般的颜色、hover 上去的颜色, 点下去的颜色）。
而这样的东西，传统上我们是用 RGB 在调色盘上设好再设到 CSS 里，
但如果你对 HSB （色相、明亮度、饱和度）有那麽一点直觉的话，
Less 里面也可以让你直接用 function 来设定，
而输出来的 css，就会自动帮你算好相对应的 RGB 。例如：
// LESS @base-color: #111; @red: #842210; #footer { color: @base-color + #003300; // 饱和度降低 10% border-color: desaturate(@red, 10%); } 转换之后css #footer { color: #114411; border-color: #7d2717; }======================================
模式匹配和导引表达式
有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：
// LESS .mixin (dark, @color) { //亮度降低 10% color: darken(@color, 10%); } .mixin (light, @color) { //亮度增加 10% color: lighten(@color, 10%); } .mixin (@_, @color) { display: block; }运用到class上
.class {
.mixin(light, #888);
}
转换之后css
.class {
color: #a2a2a2;
display: block;
}
==============================================
具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值
只有被匹配的混合才会被使用。变量可以匹配任意的传入值，
而变量以外的固定值就仅仅匹配与其相等的传入值。
导引
//lightness(@a) 从颜色值中提取 'lightness' 值（亮度） .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } .class1 { background-color: black; color: #ddd; } .class2 { background-color: white; color: #555; }当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。
转载于:https://www.cnblogs.com/wmwPro/p/5460473.html
相关资源：JAVA上百实例源码以及开源项目