我的less学习之路

less注释

可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中。开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文件中不会有注释。

less变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。例如:@width:300px

less混合

混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。

可以创建一个mixin,它可以通过简单地放置括号后在输出中消失。

.a(){
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}

最终输出的css为:

.myclass {
background: #64d9c0;
padding-left: 100px;
}

也可以传递参数

.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.test{
width:300px;
height:200px;
.border_radius(10px);
}

编译之后的css代码为:

.test {
width: 300px;
height: 200px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

less嵌套

它是一组CSS属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性。

.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}

less操作

LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/),它们可以对任何数字,颜色或变量进行操作。

@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
上一篇:基于SOA的银行系统架构


下一篇:Win7 + ubuntu14.04 双系统安装教程