less

初级一：class定义，移植

初级二：class定义，传参，赋值

初级三：class定义，传餐，赋值默认值

初级四：&的用法

@import "./common.less";

@font-size-base:16px;

html{

background:fadeout(#000,50);

}

.class1(@size:80px; @bgcolor:#999){

font-size: @size;

background: @bgcolor;

}

.class2(@base-size:32px){

// background: #f00;

.btn{

@btn-height-sm:@btn-height-base - 4px;

@btn-height-base:@base-size;

@btn-height-lg:@btn-height-base + 8px;

border:1px solid #f00;

line-height: @btn-height-base;

height:@btn-height-base;

text-align: center;

width:120px;

color:#0f0;

&:hover{

color:#f00;

}

&.disabled{

cursor: not-allowed;

}

&-sm{

height: @btn-height-sm;

line-height: @btn-height-sm;

width: 80px;

}

&-lg{

height: @btn-height-lg;

line-height: @btn-height-lg;

width: 180px;

}

}

}

h1{

font-size: @font-size-base;

span{

color:#f00;

&:after{

font-weight: bold;

}

& & {

line-height: 100px;

}

}

@font-size-base:100px;

.class1(520px;#ccc);

.class1(100px);

.class1();

}

.l{

.class2(60px);

}

@default-device-width :375;

@default-design-width :1242;

@default-zoom :100;

.px2rem(@s){

@size:@s / (@default-design-width / @default-device-width) / @default-zoom;

}

p{

&{

margin: @size auto;.px2rem(50rem);

}

&{

padding-left: @size;

.px2rem(50rem)

}

&{

padding-right: @size;

.px2rem(70rem)

}

// &{padding-left: @size;.px2rem(50rem)}

}

@theme:l;

@{theme}-btn{

font-size: @theme;

& + & {

font-size: 60px;

}

&-@{theme}-sm{

font-size: 20px

}

&-@{theme}-lg{

font-size: 30px;

}

background: url('@{theme}/img/test.jpg');

height:~'calc(100% - 50px)';

}

body{

// 100 + 10 * 3 = 130px;

width: 100 + 10 * 3rem;

}