学习内容 less语法
1、注释
//注释 这个注释是css解析不出来的
2、变量
@aa:10;
@bb:1px solid red;
@cc:blue;
3、嵌套
.box{
color:@cc;
border:@bb;
}
/*调用函数的用法*/
.box2{
height:20px;
.box();//相当于调用函数 上面的.box
.box;//相当于调用函数加不加括号都可以 相当于上面的.box
}
传参的用法1
.box(@dd){
color:@cc;
border:@bb;
width:@dd;
}
.box2{
height:20px;
.box(20px);/*传值进去.box(@dd)*/
}
传参的用法2
.box(@dd:2px){
color:@cc;
border:@bb;
width:@dd;
}
.box2{
height:20px;
.box();/*调用函数.box()不传参 使用函数默认参数值@dd:2px*/
}
.box2{
height:20px;
.box(6px);/*调用函数.box()传值使用传递过去的值6px*/
}
调用函数注意事项
.div{
color:@cc;
}
p{
div;//只有标签名字不能当函数来调用
}
*****
div{
color:@cc;
}
p{
div;//报错 不能以标签名当函数 只能用类名或者id名当函数
}
4、混入（最常用）
以前写法
.layout{}
.layout div{}
.layout div a{}
现在写法
.layout{
>div{
color:red;
a{
text-align:center;
img{
width:20px;
&表示当前的img 在谁里面写表示当前的谁
&:hover {
width:60px;
}
}
//&表示当前的a
&:hover img{
width:40px;
}
}
}
}
5、导入（补充）
@import "./b.less";找到b.less文件的路径
就可以把b.less的文件导入到当前的less文件内
就可以使用b.less里面定义的变量（样式）或者函数（样式）
