1.1.less介绍:less将css动态化,比如具有变亮,继承,运算,函数。less可以运行在客户端(支持IE6),也可以借助Node.js或者Rhino在服务器端运行。
(本人为目前接触过Rhino)。
2.1变量。变量支持单独定义通用样式,在需要的时候调用,在全局样式调整的时候只需要修改几行代码。
例如:
@color:red;
#header{ color: @color; }
h2{ color: @color; }
以上三行代码等价于:
#header{ color:red; }
h2{ color: red; }
2.2混合.混合可以将定义好的一个class A已入到另一个 class B中,从而实现B继承A的所有属性。还可以带参数调用。
例如:
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radisu;
}
#header{ .rounded-corners; }
#footer{ .rounded-corners; }
以上代码等价于:
#header{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; }
..............;
2.3嵌套规则。在一个选择器中嵌套另一个选择器来实现继承,大大减少代码量。
例如:
#header{
h1{
font-size: 28px;
color: red;
}
p{
font-size: 26px;
a{
text-decoration: none;
&:hover{
border-radius: 4px;
}
}
}
}
以上代码等价于:
#header h1{ font-size: 28px; color: red; }
#header p{ font-size: 256px; }
#header p a { text-decoration: none; }
#header p a:hover{ border-radius: 4px; }