使用CSS Tree插件快速生成CSS树结构

CSS Tree快速生成CSS样式结构

1.安装CSS Tree插件

2.全选html代码

<view class="receive_address">
  <!-- 收货地址按钮 开始 -->
  <view class="btn" wx:if="{{!address.userName}}">
    <button bindtap="chooseAddress" type="primary" plain>选择收货地址</button>
  </view>
  <!-- 收货地址按钮 结束 -->
  <!-- 详细地址 开始 -->
  <view class="user" wx:else>
    <view class="user_info">
      <view class="user_name">{{address.userName}}</view>
      <view class="user_address">
        {{address.all}}
      </view>
    </view>
    <view class="user_phone">{{address.telNumber}}</view>
  </view>
  <!-- 详细地址 结束 -->
</view>

3.使用CSS Tree插件

按下Ctrl+Shift+P，选择Generate CSS tree

4.将生成的代码复制到less文件，删除无关代码，比如undefined和view标签

view.receive_address {
  undefined {

  }

  view.btn {
    button {

    }
  }

  view.user {
    view.user_info {
      view.user_name {

      }

      view.user_address {

      }
    }

    view.user_phone {

    }
  }
}

5.处理后的代码

.receive_address {
  .btn {
    button {
    }
  }

  .user {
    .user_info {
      .user_name {
      }

      .user_address {
      }
    }

    .user_phone {
    }
  }
}