Less程序式语法-课件.pptVIP

一种 动态 样式 语言： LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库，所以他可以在客户端运行，相对Sass则必须在服务端借助Ruby运行（Sass和Less区别，可以参见LESS介绍，和与Sass的比较） 中文网站：/ 英文官网： less源码： /cloudhead/less.js Less程序式语法 一：变量 Less允许我们定义一些全局的样式来管理我的css（变量必须以@开头），注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次（const，final),作用域由本地在父对象查找。 二：混合 混合能够使得我们将已定义的class引入到另一个clss中，实现样式的继承，并且可以像函数Function一样传递参数（可以带入默认值），（完全copy）（可以分为有参混合和无参混合，有参混合可以有默认值） 三：嵌套规则 我们可以在选择器中圈套其他选择器以至于实现继承，其结构和我们的DOM结构相同（串联标识符，比如下边：hover） @arguments 变量代表所有参数集合，不想单独处理每一个参数的话，可以利用@arguments 代替.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments} 使用：.box-shadow(2px, 5px); 输出： box-shadow: 2px 5px 1px #000; 四：函数 运算 Less提供提供了计算操作，与JS和less函数所对应 .mixin (dark, @color) {  color: darken(@color, 10%); } .mixin (light, @color) {  color: lighten(@color, 10%); } .mixin (@_, @color) { //@_匹配任何参数 display: block; } 匹配： .mixin(@switch, #111);  @switch= light 则会匹配 2,3 @switch= dark 则会匹配 2,3 五：模式匹配和守卫 在Less中尝试利用模式匹配替if/else，其执行原理类似switch/case 2：重载 .mixin (@a) {  color: @a; } .mixin (@a, @b) {  color: fade(@a, @b); } . mixin (#111) 则匹配 1. mixin (#111,10%) 则匹配 2 3:守卫（ Guards ） .mixin (@a) when (lightness(@a) = 50%) { background-color: black; } .mixin (@a) when (lightness(@a) 50%) { background-color: white; } .mixin (@a) {  color: @a; } .mixin(#ddd) 则匹配 1，3 .mixin(#555) 则匹配 2，3 Guards 允许我们使用,=,,=,=,关键字true（只匹配关键字true，非true不会匹配），支持逻辑and ,not ().同样可以使用一些is* functions： isnumber ， iscolor , isstring , iskeyword , isurl , ispixel , ispercentage , isem … .mixin (@a) when (isnumber(@a)) and (@a 0) { ... }  .mixin (@b) when not (@b 0) { ... }  同时我们可以使用“，”分割多个Guards ，其表示只要其中任意一个满足就为true（逻辑或 or）。  .mixin (@a) when (@a 10), (@a -10) { ... } @base-url: “”; background-image:  url(“@{base-url}/images/bg.png”); 类似:Ruby “#{base_