标签：logs 开始 weight span des amp nbsp 官网 方式
完成了以上工作之后,我们终于开始要进入主题啦,下面能我就只是讲讲基本的使用,详细的使用大家还是去看官网的吧,毕竟写起来太长了,很耗费时间呢。
变量:less中定义变量是用@变量名:值;的方式的
@bgColor:#0094ff;
@color:#fff;
.demo{
background-color:@bgColor;
color:@color;
}
生成的css代码:
.demo {
background-color: #0094ff;
color: #ffffff;
}
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
/*less*/
@bgColor:#0094ff;
@color:#fff;
.demo{
background-color:@bgColor;
color:@color;
}
.header{
border:1px solid #ededed;
.demo;
}
/*输出的css*/
.demo {
background-color: #0094ff;
color: #ffffff;
}
.header {
border: 1px solid #ededed;
background-color: #0094ff;
color: #ffffff;
}
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
/*less写法*/
@bgColor:#0094ff;
@color:#fff;
.demo{
background-color:@bgColor;
color:@color;
}
header{
border:1px solid #ededed;
.demo;
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/*输出的css*/
.demo {
background-color: #0094ff;
color: #ffffff;
}
header {
border: 1px solid #ededed;
background-color: #0094ff;
color: #ffffff;
}
header h1 {
font-size: 26px;
font-weight: bold;
}
header p {
font-size: 12px;
}
header p a {
text-decoration: none;
}
header p a:hover {
border-width: 1px;
}
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
/*less*/
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
/*css部分*/
#header {
color: #333333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
标签：logs 开始 weight span des amp nbsp 官网 方式
原文地址：http://www.cnblogs.com/leibo520/p/7073847.html
