变量的声明

@定义的 选择器,属性名,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';//可以将一些混合写入其他文件

使用时引入这个文件就行