LESS语法学习笔记

@num: 100px;
@color: red;
@mar: margin;
.box {
    width: @num;
    height: @num;
    background-color: @color;
    @{mar}: 100px auto;
}

// 代码解析后
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 100px auto;
}

&:hover {
        background-color: skyblue;
}

@num: 100px;
.box {
    width: @num + 10px;
    height: @num + 100px;
    background-color: skyblue;
}

.box {
    background-color: skyblue;
    width: round(3.6px);//四舍五入
    height: percentage(0.2);//20%
    padding: sqrt(25px);//5px
}

.temp {  /*.temp() {}这样不会被单独解析 */
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
.box {
    .temp;
}

#space() {
    .test {
        background-color: skyblue;
        color: red;
    }
}
.box {
    #space.test;
}

.line {
    font-size: 30px;
    color: 20px;
}
.box {
    &:extend(.line);//继承line的属性
    background-color: skyblue;
}

.getname(@cn) when(@cn > 4) {
    width: 100px + @cn;
}//如果cn>4执行
.getname(@cn) when(@cn < 4) {
    width: 10px + @cn;
}
.box {
    .getname(3);
}

@import 'test.less';

scroll-snap-type: x mandatory;

scroll-snap-align: start;//start center end