LESS 简单基础运用

@charset"utf-8";/*css注释被保留*/// 不保留//变量  @变量名:值;@height: 100px;.test_1 {    height: @height;}//混合#border {    border: solid 1px #ccc;}.mrr {    margin-right: 10px;}.test_2 {    .mrr;    #border;    margin-left: 10px;    //直接使用写好的css代码}//混合,带参数.border(@border_width) {    border: @border_width red solid;}.test_3 {    .border(20px);}//混合,带默认值.border_2(@border_width: 50px) {    border: @border_width red solid;}.border_radius(@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    border-radius: @radius;}.test_4 {    .border_2();    .border_2(30px);    .border_radius(6px);}//匹配模式.float(l) {    float: left;}.float(r) {    float: right;}//制作三角的css.triangle(bottom, @bw: 10px, @color: red) {    border-width: @bw;    border-color: @color transparent transparent transparent;    border-style: solid dashed dashed dashed; //dashed  for ie6}.triangle(top, @bw: 10px, @color: red) {    border-width: @bw;    border-color: transparent transparent @color transparent;    border-style: dashed dashed solid dashed; //dashed  for ie6}//@_ ,表示同名匹配中都需要带的代码.triangle(@_, @bw: 10px, @color: red) {    width: 0;    height: 0;    overflow: hidden;}.test_5 {    .float(l);    .float(r);}.test_6 {    .triangle(top);    .float(r);}.test_7 {    .triangle(bottom, 20px, blue);}//运算 +-*/@cal: 200px;.test_8 {    width: @cal - 20px;    width: @cal + 20px;    width: (@cal - 20px)*3;    width: (@cal+50)/5;    color: #ccc-#111;}//嵌套//&代表上一层选择器 // list 里面的 list-item  => &-item.list{    width: 600px;    margin:30px auto;    padding: 0;    list-style: none;    li{        height: 30px;        line-height: 30px;        background-color: pink;        margin-bottom: 5px;        padding: 0 10px;    }    a{        .float(l);        &:hover{            background-color: red;        }    }    span{         .float(r);    }}//@arguments.border_arg(@w:30px,@c:red,@sty:solid){    border:@arguments;}.test_9{    .border_arg();    .border_arg(30px,blue);}//避免编译 ~' width:;'.test_10{    width:calc(300px-30px);    width:~'calc(300px-30px)';}//!important.test_important{    #border!important;    .border_radius(10px)!important;}