less样式表

LESS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响，同时也影响了Sass的新语法：SCSS。[2] 
LESS是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。
 

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

Less缺点

css本身就是比较简单的语言，使用less反而把简单的东西复杂化了，虽然less加入了模块化的东西，看似方便管理了，可是在多人合作的团队中我不推荐使用，只要团队中的成员都有模块化的思想，并有统一的规范，less其实没有使用的价值

less语法

LESS 做为 CSS 的一种形式的扩展，它并没有减少 CSS 的功能，而是在现有的 CSS 语法之上，添加了许多其它的功能，所以学习 LESS 是一件轻松快乐的事情，让我们一起来学习它吧！
在语法方面，LESS与CSS较为接近，一个合法的CSS代码段本身也是一段合法的LESS代码段。LESS提供变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

变量

变量允许我们在一个地方定义一系列通用的值，然后在整个样式表中调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
1
2
3
4
5
6
7
8
//LESS源码
@color:#4D926F;
#header{
color:@color;
}
h2{
color:@color;
}
1
2
3
4
5
6
7
/*编译后的CSS*/
#header{
color:#4D926F;
}
h2{
color:#4D926F;
}

混合

混合是指在一个 CLASS 中引入另外一个已经定义好的的 CLASS，就像在当前 CLASS 中增加一个属性一样。Less实现了这种嵌套。我们还可以使用参数，就好像我们再用一个函数一样。
1
2
3
4
5
6
7
8
9
10
11
12
//LESS源码
rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(10px);
}
1
2
3
4
5
6
7
8
9
10
11
/*生成的CSS*/
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
1
2
3
4
5
6
7
8
9
10
11
12
//LESS源码
#header{
h1{
font-size:26px;
font-weight:bold;
}
p{font-size:12px;
a{text-decoration:none;
&:hover{border-width:1px}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*编译后的CSS*/
#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;
}

函数与运算

在你的样式表中，元素之间是否会存在数学关系？ 运算提供了对属性值和颜色的加、减、乘、除操作，赋予你创建属性之间复杂关系的能力。运算应当只出现在圆括号中，这样能确保与CSS的兼容。
1
2
3
4
5
6
7
8
9
10
11
12
13
//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%);
}
1
2
3
4
5
6
7
8
9
10
/*编译后的CSS*/
#header{
color:#333;
border-left:1px;
border-right:2px;
}
#footer{
color:#114411;
border-color:#7d2717;
 

 

 下面是我的公众号，大家可以关注一下，可以一起学习，一起进步：

具体学习使用less中文网http://lesscss.cn/

posted @ 2016-08-05 15:26  夏目友人喵  阅读(356)  评论(0)    收藏  举报