Skip to content

需求

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

  2. DOM 结构

    html
    <div class="app">
        <div class="main"></div>
    </div>
    <div class="main"></div>
  3. 效果图

css 写法

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 写法

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;
}

基于 MIT 许可发布