关于.less

我之前也没用过这个东西，最近在学微信小程序，发现用这个编写css超级好用，

写微信小程序前端的时候，我喜欢在微信开发者工具上编译预览，在vscode上写代码，而.less清晰方便就是因为它的结构如下，

/* pages/cart/cart.wxss */
page {
  padding-bottom: 90rpx;
}
.revice_address_row {
  .address_btn {
    padding: 20rpx;
    button {
      width: 60%;
    }
  }
  .user_info_row {
    display: flex;
    padding: 20rpx;
    .user_info {
      flex: 5;
    }
    .user_phone {
      flex: 3;
      text-align: right;
    }
  }
}
.cart_content {
  .cart_title {
    padding: 20rpx;
    font-size: 36rpx;
    color: var(--temeColor);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .cart_main {
    .cart_item {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #ccc;
      .cart_chk_wrap {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        checkbox-group {
          checkbox {
          }
        }
      }

      .cart_img_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 80%;
        }
      }

      .cart_info_wrap {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        .goods_price_wrap {
          display: flex;
          justify-content: space-between;
          .goods_price {
            color: var(--temeColor);
            font-size: 34rpx;
          }

          .art_num_tool {
            display: flex;
            .number_edit {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1rpx solid #ccc;
            }

            .goods_num {
              width: 55rpx;
              height: 55rpx;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
.footer_tool {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
  display: flex;
  border-top: 1rpx solid #ccc;
  .all_chk_wrap {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .total_price_wrap {
    flex: 5;
    padding-right: 15rpx;
    text-align: right;
    .total_price {
      .total_price_text {
        color: var(--temeColor);
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }

  .order_pay_wrap {
    flex: 3;
    background-color: var(--temeColor);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

对应的wxml如下

<!--pages/cart/cart.wxml-->
<!-- 收货地址 -->
<view class="revice_address_row">
  <!-- 当收货地址 不存在时 -->
  <view class="address_btn" wx:if="{{!address.userName}}">
    <button bindtap="handleChooseAddress" type="primary" plain>获取收货地址</button>
  </view>
  <!-- 当收货地址 -->
  <view wx:else class="user_info_row">
    <view class="user_info">
      <view>
        收货人：{{address.userName}}
      </view>
      <view>
        {{address.all}}
      </view>
    </view>
    <view class="user_phone">
      {{address.telNumber}}
    </view>
  </view>
</view>
<!-- 购物车内容 -->
<view class="cart_content">
  <view class="cart_title">
    购物车
  </view>
  <view class="cart_main">
    <view class="cart_item" wx:for="{{cart}}" wx:key="goods_id">
      <!-- 复选框 -->
      <view class="cart_chk_wrap">
        <checkbox-group bindchange="">
          <checkbox></checkbox>
        </checkbox-group>
      </view>
      <!-- 商品图片 -->
      <navigator class="cart_img_wrap">
        <image src="{{item.goods_small_logo}}" mode="widthFix" />
      </navigator>
      <!-- 商品信息 -->
      <view class="cart_info_wrap">
        <view class="goods_name">
          {{item.goods_name}}
        </view>
        <view class="goods_price_wrap">
          <view class="goods_price">
            ￥{{item.goods_price}}
          </view>
          <view class="art_num_tool">
            <view class="number_edit">-</view>
            <view class="goods_num">{{item.num}}</view>
            <view class="number_edit">+</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 底部工具栏 -->
<view class="footer_tool">
  <!-- 全选 -->
  <view class="all_chk_wrap">
    <checkbox-group bindchange="">
      <checkbox>全选</checkbox>
    </checkbox-group>
  </view>
  <!-- 总价格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合计：<text class="total_price_text"></text>
    </view>
    <view>
      包含运费
    </view>
  </view>
  <!-- 结算 -->
  <view class="order_pay_wrap">
    结算
  </view>
</view>

结构很清晰，一层套一层，顺序和wxml标签顺序一致，清晰明了，而且你写完.less文件保存后会自动生成.wxss不需要你操心

vscode上我装了两个插件，一个是

 

 另外一个是

 

 ，我重点想说的是第二个插件，选中你的代码块Ctrl+Shift+P选择 Generate CSS tree

 

 就可以得到这样的结果

 

 

 

会出现这样一个文本，这时候你就可以复制到.less文件了，根据你的需要增减修改，很方便，更多的优点请自行探索，百度上有更多我就不说了，真的觉得用这个写很快很方便

 

 

 

好久没更了.................想他