变量的声明
@定义的 选择器,属性名,url 使用时必须 @{xx}使用
属性值不能@{}使用 会报错
@num= 300px;
下面这种类似函数
.border(@width){
border:@width solid red;
}
变量的使用
.box{
width:@num;
.border(20px);
}
样式计算
.box{
width:300px;
.tri{
width:100% +30px;
}
}
这里会有一个问题就是
css的解析结果为父级的130%，即390px,很显然这是错误的，我要的是330px;
解决方法：不让css计算结果，让浏览器进行计算。width:calc(100%+30px);
calc是css3的属性，如果要求兼容性，则width:~calc(100%+30px);
~表示避免被css编译
&运算符
嵌套写时，比如要选择hover,可以这么写
.box{
width:300px;
&:hover{
width:100%;
}
}
注释
以//开头的注释，不会被编译到css文件中以
/**/包裹的注释会被编译到css文件中
引入其他less
@import'./xx.less';//可以将一些混合写入其他文件
使用时引入这个文件就行
