使用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 {
    }
  }
}