//声明编码格式@charset "utf-8";//less 里定义变量的话 一定要用@开头 例如 @变量名:值@test_width:300px;.box{    width: @test_width;    height:@test_width;    background-color: yellow;    .border;}//混合,直接把border里的内容给了.box.border{    border:solid 5px pink;}.box2{    .box;    margin-left: 100px;}//混合 - 可带参数的.border_02(@border_width){    border: solid yellow @border_width;}.test_hunhe{    .border_02(20px)}//混合，默认带值.border_03(@border_width:10px){    border: solid green @border_width;}.test_hunhe_03{    .border_03();}//混合的例子.border_radius(@radius:5px){    -webkit-border-radius:@radius;    -moz-border-radius:@radius;    border-radius:@radius;}.radius_test{    width: 100px;    height: 40px;    background-color: #e60;    .border_radius(10px);}//匹配模式//普通写法.sanjiao{    width:0;    height: 0;    overflow: hidden;    border-width: 10px;    border-color: red transparent transparent transparent;    border-style: solid;    //兼容IE写法    border-style:dashed dashed solid dashed;}//匹配模式写法.triangle(top,@w:5px,@c:#ccc){//朝上 边框宽度 默认颜色    border-width: @w;    border-color: transparent transparent @c transparent;    border-style: solid dashed dashed dashed;}.triangle(bottom,@w:5px,@c:#ccc){//朝下 边框宽度 默认颜色    border-width: @w;    border-color: @c transparent transparent transparent;    border-style: dashed dashed solid dashed;}.triangle(left,@w:5px,@c:#ccc){//朝左 边框宽度 默认颜色    border-width: @w;    border-color: transparent  @c transparent transparent;    border-style: dashed dashed dashed solid;}.triangle(right,@w:5px,@c:#ccc){//朝右 边框宽度 默认颜色    border-width: @w;    border-color: transparent transparent transparent @c;    border-style: dashed dashed dashed solid;}//normal.sanjiao2{    width: 0;    height: 0;    overflow: hidden;    .triangle(top,100px,#3a9);}//更简化的写法.triangle(@_,@w:5px,@c:#ccc){    width: 0;    height: 0;    overflow: hidden;}.sanjiao3{    .triangle(bottom,100px);}//匹配模式 - 定位.pos(r){    position: relative;}.pos(a){    position: absolute;}.pos(f){    position: fixed;}.pipe{    width: 200px;    height:200px;    background-color: #3a9;    .pos(r);}//运算@test_01:300px;.box_02{    width: @test_01 + 20; //320}//嵌套规则//小实例,ul里有li,li里有a和span,css写法// .list{}// .list li{}// .list a{}// .list span{}//less写法.list{    width: 600px;    margin: 30px auto;    padding: 0;    list-style: none;    li{        height: 30px;        line-height: 30px;        background-color: pink;        margin-bottom: 5px;    }    a{        float: left;        //&代表他的上一层选择器        &:hover{            color: red;        }    }    span{        float: right;    }}//@arguments包含了所有传递进来的参数。如果不想单独处理每一个参数的话可以像这样写//此法所用不多.border(@w:30px,@c:red,@xx:solid){    //普通写法        //border:@w @c @xx;    //@arguments写法        border:@arguments;}.test_arguments{    .border(5px,#3a9,dotted);}//避免编译  //有时候需要输出不正确的css语法或者less不认识的语法  //输出这样的值可以在字符串前加上一个~.test_03{    width: calc(300px - 30px); //这样写less会自动计算括号里的值 输出为 width: calc(270px);    width: ~‘calc(300px - 30px)‘; //原封不动输出width: calc(300px - 30px),适用于滤镜等}//!important关键字，和混合模式混合使用，但是不建议使用，可以只做调试用.test_important{    .border!important;}