需求

1. 在下面 DOM 结构上添加样式，使其达到下图所示效果。

2. DOM 结构

   <div class="app">
       <div class="main"></div>
   </div>
   <div class="main"></div>

3. 效果图

css 写法

.app {
    width: 100px;
    height: 100px;
    background-color: red;
}
.app .main {
    width: 30px;
    height: 30px;
    background-color: pink;
}
.main {
    width: 50px;
    height: 50px;
    background-color: blue;
}

less 写法

@p1: 100px;
@p2: 30px;
@p3: 50px;
@bac: background-color;
.app {
    & {
        width: @p1;
        height: @p1;
        @{bac}: red;
    }
    .main {
        width: @p2;
        height: @p2;
        @{bac}: pink;
    }
}
.main {
    width: @p3;
    height: @p3;
    @{bac}: blue;
}