less学习笔记（一）

less的写法如下 .content { ul{ list-style: none; } li{ height: 25px; line-height: 25px; padding-left: 15px; background: url("arr.jpg") no-repeat center left; a{ text-decoration: none; color: #535353; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } } } 注释的写法 //只会在LESS中显示 /*就会在LESS和CSS中显示*/

编译less的一个工具koala（学习node.js之前可以使用）

定义变量用@开头 定义变量为属性名或者选择器时： @a:width; .@{a}{ @{a}:960px; } 定义变量为url时：@url:"/*里面是地址*/"; 定义变量又延迟加载特性，即可以先使用变量，后定义变量; 定义多个变量时采用在同一兄弟作用域就近原则取值。

混合模式：把共同的css样式放入一个类似于类的选择器中：.a(){/*共同的样式*/} 使用时在样式中加上.a即可饮用.a()中的样式

带选择器的混合：.b{&:hover:{border:1px solid red;}} div{.b();} 带参数的混合：.b(@color:red){border:1px solid @color} div{&hover{b(yellow)}} &:带表当前元素的父元素，如果把&放在选择器后，就会将当前选择器插入到所有父选择器之前； 传有多个参数时： 如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值， 如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值 命名参数： .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; }

.class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } .class3{ .mixin(@padding: 80px;) }

@arguments的使用： .border(@x:solid,@c:red){ border: 21px @arguments; } .div1{ .border(solid); }

匹配模式的使用： .border(all,@w: 5px){ border-radius: @w; } .border(t_l,@w:5px){ border-top-left-radius: @w; } .border(t_r,@w:5px){ border-top-right-radius: @w; } .border(b-l,@w:5px){ border-bottom-left-radius: @w; } .border(b-r,@w:5px){ border-bottom-right-radius: @w; }

footer{ .border(t_l,10px); .border(b-r,10px); background: #33acfe; } 混合的返回值： .average(@x, @y) { @average: ((@x + @y) / 2); @he:(@x + @y); }

div { .average(16px, 50px); padding: @average; margin: @he; }

运算： less会自动为你推断出单位，所以只要在运算时有任意一个值有单位就能实现运算 less在运算时，先将颜色值转为rgb模式，然后再转换为16进制的颜色值并返回 rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作 运算时不能直接使用英文颜色名称进行运算 函数： rgb在less中是一个函数，会返回16进制的颜色值 red(),green(),blue()传入一个16进制的颜色值会返回一个相应颜色的十进制值 命名空间： demo1: #bgcolor(){ background: #ffffff; .a{ color: #888888; &:hover{ color: #ff6600; } .b{ background: #ff0000; } } }

.wi{ background: green; color: #fff; .a{ color: green; background: #ffffff; } }

.bgcolor1{ background: #fdfee0; #bgcolor>.a; } .bgcolor2{ .wi>.a; } demo2: //省略>写法 #bgcolor(){ background: #ffffff; .a{ color: #888888; &:hover{ color: #ff6600; } .b{ background: #ff0000; } } } .wi { background: green; color: #fff; .a { color: green; background: #ffffff; } } .bgcolor1{ background: #fdfee0; #bgcolor .a; } .bgcolor2{ .wi .a; } 总结命名空间：有以上两个demo可见，less中引用重复的样式时与css中使用子集选择器的方式相类似。