Less中的嵌套,混合,带参数混合,运算

Less如其名,是让css的繁琐编码变less的利器。一些基础用法便能解决项目中的多数问题。

1. 嵌套

以a标签为例,通常需要定义a标签及其hover,focus的样式。

css:

a{color:#000;}
a:hover{color:#fff;}
a:focus{color:#ff0000;}

真正的项目中,a标签或许拥有一个类名,并且这个类名较长。

于是复制粘贴类名->写样式->再粘贴类名->加上:hover->写入样式->再粘贴类名->加上focus->写入样式。

或者再有visited样式,接着复制。。。而Less不需要我们这样做。

Less:

a{
  color:#000;
  &:hover{
    color:#fff;
  }
  &:focus{
    color:#ff0000;
  }
}

只需要&:hover, &:focus,不管类名是长是短,是好是坏,再也不用复制它了!”&”是链接符:

有“&”:

a{
  &.tag{
    color:#fff;
  }
}

编译为css(类名为tag的a标签):

a.tag{
  color:#fff;
}

无“&”:

a{
  .tag{
    color:#fff;
  }
}

编译为css(a标签下面的类名为tag的标签):

a .tag{
  color:#fff;
}

2. 混合

定义一个class,里面包含样式代码,如:

.filter{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h3{
   color:red;
   .filter;
}

编译为css:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

3. 多参数混合

像上面的混合,可以在其他标签同样调用.filter。但上例的透明度值为80%,而其他地方调用的时候需要改变这个值而其他不变,就需要将值以参数形式传入。

.filter(@percent: 80, @float:0.8){
    filter:alpha(opacity=@percent);
    -moz-opacity:@float;
    -khtml-opacity: @float;
    opacity: @float;
}
h3{
    color:red;
    .filter;
}
h4{
    color:blue;
    .filter(50,0.5);
}

h4中,将透明度的值以变量的形式传入。编译为css如下:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h4{
   color:blue;
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

无需复制长串css,随意更改参数,随意调用吧^ ^

4.运算

响应式设计中常常需要计算百分比用于大小、定位,Emmet能够帮助计算,但只能保留最多两位小数,并且需要快捷键把结果计算出来,必要的时候手动改成百分比。Less只需写好表达式,编译时会计算结果,于是再也不用关心结果是多少。

div{
   width:550/810;
}

这样的结果是:0.6790123456790124。可是计算宽度,肿么可以用小数点咧??

于是(参考:http://lesscss.org/functions/#math-functions-percentage

div{
   width:percentage(550/810);
}

结果为67.90123456790124%。正是我想要的!够精确!

 

Less中国官网:http://lesscss.net/article/home.html

 



Leave a Reply

Your email address will not be published. Required fields are marked *

*