动态样式语言--LESSCSS

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如注释、变量、混合、嵌套、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

首页- LESSCSS中文官网：http://www.1024i.com/demo/less/

Less中文网：http://www.lesscss.net/

开发工具Koala：http://koala-app.com/index-zh.html

1.less中的注释：

/**/是被编译的

//是不会被编译的。建议使用//去注释！

2.less中的变量：

//
@test_width:300px;
.box{
width:@test_width;
height:@test_width;
background:yellow;
}

3.less中的混合：不带参数、带参数和带默认值参数的

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

//混合:重用样式;
.border{border:1px solid #000;}

#box{
width:@test_width;
height:@test_width;
background:yellow;
.border;
}
//混合：可带参数
.border_2(@border_width){
border:@border_width solid blue;
}
//混合：带默认值的参数
.border_3(@border_width:5px){
border:@border_width solid #ddd;
}

应用场景：

//混合的例子:css3写兼容性;
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}

4.less的匹配模式：

//匹配模式：只做三角形、定位

/*通过自动匹配，来动态选择对应样式，例如实现一个css三角形：*/
.sanjiao{
width:0;height:0;overflow:hidden;
border:10px;
border-color: transparent transparent #000 transparent;
border-style: solid solid dashed solid ;
}
/*匹配模式开始：*/
//上
.triangle(top,@w:10px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:solid solid dashed solid;
}
//下
.triangle(bottom,@w:10px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:dashed solid solid solid;
}
//左
.triangle(left,@w:10px,@c:#ccc){
border-width:@w;
border-color:transparent transparent transparent @c ;
border-style:solid solid solid dashed ;
}
//右
.triangle(right,@w:10px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:solid dashed solid solid;
}
//一定执行:@_是固定格式，剩下两个参数也必须补全！
.triangle(@_,@w:5px;@c:#ccc){
width:0;height:0;overflow: hidden;
}
//测试：传入不同的参数选用不同的样式
.sanjiao{
.triangle(bottom,20px);
}

5.less的嵌套继承

在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。可减少嵌套层次，减少选择器匹配次数。应用非常方便！

.list{
list-style-type: none;
width:300px;margin:5px auto;
padding:5px;background:#fff;
li{
height:30px;line-height: 30px;
margin:2px auto;
background: #ccc;
&:hover{
background:#eee;
}

}
//将li中的a提出来，与父级平级！减少嵌套层数，减少匹配次数
a{
text-decoration: none;color:red;
//&代表上一层选择器！
&:hover{
color:#fff;
}

}

span{font-weight: bold;}
}

6.less的函数和运算：

//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: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

7.less的@argument

@argument包含了所有传递进来的参数，无需单独处理每一个参数。

//@arguments
//无需单独写入每一个参数，直接将@argument传入
.border_4(@width:5px,@c:#ccc){
border:@arguments solid;
}
.text_box5{
.border_4(5px,#c8c8c8);
}

8.”~“避免编译和!important：

//避免编译
.test_03{
width:~'calc(300px-30px)';
}
//!important 为所有样式加上样式 调试,但尽量少使用
.text_box5{
.border_radius() !important;
}

…..(此处偷懒很多字)

总结：渐渐不喜欢篇幅过长的博文了，喜欢短小精悍的，知识结构清晰，能利用零碎时间复习巩固，这次是之前学过的less–前端css预处理器，在繁杂的css编写中无疑是一大利器，也是非常推荐的课程。梳理的知识点虽简单，但已大致能满足大体的实践开发了。推荐博文：

前端构建：Less入了个门：/article/4741136.html