LESS语法

教程根据慕课网Leo老师less即学即用教程而来

LESS语法

//变量前面要加@
@redColor: red;
@boxlength: 400px;

//混合
.border {
    border:5px solid blue;
}

//混合带参数
.border-radius(@radius: 20px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.box {
    width: @boxlength+100;// 变量可支持运算
    height: ~'calc(300px-100px)'; //加'~'可避免编译
    background: @redColor;
    .border(); //混合
    .border-radius(30px) !important; 
    //1.混合带参数，参数可修改，默认不写则为初始数值
    //2.加入!important 样式里面的都会加上

}

//匹配，相当于if
.triangle(top,@size:100px) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent blue transparent;
    border-width: @size;
}
.triangle(right,@size:100px) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent blue;
    border-width: @size;
}
.triangle(bottom,@size:100px) {
    border-style: solid dashed dashed dashed;
    border-color: blue transparent transparent transparent;
    border-width: @size;
}
.triangle(left,@size:100px) {
    border-style: dashed solid dashed dashed;
    border-color: transparent blue transparent transparent;
    border-width: @size;
}
.triangle(@_,@size:100px) {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
}

.triangle {
    .triangle(left,200px); //if == left
}

//@arguments参数用法
.border_arg(@width: 1px, @color: red, @style: solid) {
    border: @arguments;
}

//嵌套用法
ul {
    .border_arg(); ////@arguments参数用法
    width: 400px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background-color: pink;
    li {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #000;
    }
    a {
        float: left;
        text-decoration: none;
        position: relative;
        &:hover {
            color: red;
        }
        .triangle {
            .triangle(bottom,5px);
            top: 15px;
            left: 180px;
        }
    }
    span {
        float: right;
    }
}

CSS语法转换

.border {
  border: 5px solid blue;
}
.box {
  width: 500px;
  height: calc(300px-100px);
  background: #ff0000;
  border: 5px solid blue;
  -webkit-border-radius: 30px !important;
  -moz-border-radius: 30px !important;
  border-radius: 30px !important;
}
.triangle {
  border-style: dashed solid dashed dashed;
  border-color: transparent blue transparent transparent;
  border-width: 200px;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
}
ul {
  border: 1px #ff0000 solid;
  width: 400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: pink;
}
ul li {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #000;
}
ul a {
  float: left;
  text-decoration: none;
  position: relative;
}
ul a:hover {
  color: red;
}
ul a .triangle {
  border-style: solid dashed dashed dashed;
  border-color: blue transparent transparent transparent;
  border-width: 5px;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 180px;
}
ul span {
  float: right;
}