转载

Less 快速入门

Bootstrap 的 CSS 文件是通过 Less 源码编译出来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译出来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

快速入门

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

实例:

 @base: #f938ab;  .box-shadow(@style, @c) when (iscolor(@c)) {   -webkit-box-shadow: @style @c;   box-shadow:         @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {   .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box {   color: saturate(@base, 5%);   border-color: lighten(@base, 30%);   div { .box-shadow(0 0 5px, 30%) } }

编译结果

 .box {   color: #fe33ac;   border-color: #fdcdea; } .box div {   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }