less是一种动态样式语言,属于css预处理器的范畴,它拓展了css语言,增加了变量,Minxin,函数等特性,是css更易维护和拓展,它既可以在客户端上运行,也可以借助node.js在服务端运行。less的中文官网:http://lesscss.cn/ ,bootstrap中less教程:http://www.bootcss.com/p/lesscss/ 。less编译工具:koala官网:www.koala-app.com。
目录
4、less中的混合:混合就是将一系列属性从一个规则集引入到另一个规则集中的方式
1、less中的注释
1)以//开头的注释,不会被编译到css文件中
2)以/**/包裹的注释会被编译到css文件中
/*这是想暴露出去的注释*/
//这是见不得人的注释
2、less中的变量
使用@来声明一个变量:@ping:ping;
1)作为普通属性值只来使用:直接使用@ping
2)作为选择器和属性名:#@{selector的值}的形式
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/less.css"
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="less/less.min.js"></script>
</html>
//less.css文件
@ping:pink;//作为普通属性值来使用,直接只用@ping
@m:margin;//作为属性名
@selector:#wrap;//作为选择器
*{
@{m}:0; //作为属性名
padding:0
}
@{selector}{ //作为选择器
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;//作为普通属性值来使用,直接只用@ping
height:100px;
width:100px;
}
}
3)变量的延迟加载
less中的变量延迟加载是:less花括号“{}”里面的是块级作用域,
而且使用的变量等这个块级最后一个代码执行完后,才会去读取变量,
变量存在覆盖。同一个块级同名的变量,最后一个总是覆盖前面一个的值
@var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var;//3 这就是变量的延迟加载效果,最后一个变量是@var:3;所以这里的值是3
@var:3;
}
one:@var;
}
3、less中的嵌套规则
1)基本嵌套规则
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/less.css"
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="less/less.min.js"></script>
</html>
//less.css文件
@ping:pink;
*{
margin:0;
padding:0
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
}
}
2)&的使用
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/less.css"
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="less/less.min.js"></script>
</html>
//less.css文件
@ping:pink;
*{
margin:0;
padding:0
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
&:hover{ //&的使用
background:ping;
}
}
}
//使用&编译后的结果
#warp .inner:hover{
barckground:pink;
}
4、less中的混合:混合就是将一系列属性从一个规则集引入到另一个规则集中的方式
1)普通混合
//两个div水平居中,没用混合前,会发现,inner和inner2出现了大量的重复代码,臃肿,而且会编译到css中去
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/less.css"
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
<div class="inner2">
</div>
</div>
</body>
<script src="less/less.min.js"></script>
</html>
//less.css文件
@ping:pink;
*{
margin:0;
padding:0
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
}
.inner2{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
}
}
//改善后的方式,普通混合,混合是以“.”开头的
.juzhong{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
.juzhong
}
.inner2{
.juzhong
}
}
2)不带输出的混合
不带输出混合,在原来的基础之上,在混合名后面加个括号,.juzhong(),这样在编译的时候,混合只出现在less文件中,而不会出现在编译后的css文件中来
.juzhong(){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@ping;
height:100px;
width:100px;
}
3)带参数的混合
.juzhong(@w,@h,@c){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@c;
height:@h;
width:@w;
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
.juzhong(100px,100px,ping);
}
.inner2{
.juzhong(200px,200px,deeppink);
}
}
4)带参数并且有默认值的混合和带多个参数的混合
.juzhong(@w:10px,@h:10px,@c:ping){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@c;
height:@h;
width:@w;
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
.juzhong(100px,100px,ping);
}
.inner2{
.juzhong();
}
}
5)命名参数
.juzhong(@w:10px,@h:10px,@c:ping){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@c;
height:@h;
width:@w;
}
#wrap{
position:relative;
width:300px;
height:400px;
border:1px solid;
margin:0 auto;
.inner{
.juzhong(100px,100px,ping);
}
.inner2{
.juzhong(@c:black);//再给混合名参数传入实参时,指定参数和值。要是没有指定名参数的话,会根据形参的位置顺序进行对应入号
}
}
6)匹配模式
//以三角形为例来说明
<html>
<body>
<div id="wrap">
<div class="sjx"></div>
</div>
</body>
</html>
.triangle(L,@w,@c){
width:0px;
height:0px;
border-winth:@w;
boder-style:dashed solid dashed dashed;
border-color:transparent @c transparent transparent;
overflow:hidden;
}
.triangle(R,@w,@c){
width:0px;
height:0px;
border-winth:@w;
boder-style:dashed solid dashed dashed;
border-color:transparent transparent transparent @c;
overflow:hidden;
}
.triangle(T,@w,@c){
width:0px;
height:0px;
border-winth:@w;
boder-style:dashed solid dashed dashed;
border-color: @c transparent transparent transparent;
overflow:hidden;
}
.triangle(B,@w,@c){
width:0px;
height:0px;
border-winth:@w;
boder-style:dashed solid dashed dashed;
border-color:transparent transparent @c transparent;
overflow:hidden;
}
在使用时这样使用,.triangle(R,40px,ping)里面的第一个参数是匹配模式,相当于命名,指定那个混合名字,匹配的对应的混合,第一个参数叫做匹配符
#wrap .sjx{
.triangle(R,40px,ping)
}
7)arguments变量
.border(@1,@2,@3){
border:@arguments;
}
#wrap .sjx{
.border(1px,solid,black)
}
5、less计算
#wrap .sjx{
width:(100 + 100px) //less中,两个数字运算,只需要一个数字带单位即可
}