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中使用子集选择器的方式相类似。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有