前文：【微信小程序sass样式】几个可以添加到app.scss的全局样式类 | 微信开放社区 (qq.com)
现在对这篇文章进行更新与完善，话不多说，上代码和案例

common.scss

此文件定义一些sass变量：

$space: 16rpx;
$mini-space: 8rpx;
$font: 24rpx;
$title: 30rpx;
$bg-gray: #ddd;
$bg-primary: #07c160;

app.scss

@import './common.scss';

page {
  font-size: $font; // 字号统一
  background-color: $bg-gray; // 背景与container无缝衔接
}
// 容器，用它来为其中的view添加灰色背景。其直接子元素view或.view会具有统一间距、圆角、padding
.container {
  &.fluid {
    height: 100vh;
  }

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: $space;
  box-sizing: border-box;
  background-color: $bg-gray;

  & > view,
  & > .view {
    margin-bottom: $space;
    background-color: #fff;
    padding: $space;
    border-radius: $space;
  }
}

// row flexbox
.row {
  display: flex;
  flex-direction: row;
  padding: $space;
  align-items: center;
}
// column flexbox
.col {
  display: flex;
  flex-direction: column;
  padding: $space;
  align-items: center;
}
// 需配合.col（column flexbox）和.row（row flexbox）使用，作为他们的子元素，作用是尽量占满父元素剩余空间
.flex-1 {
  flex: 1;
}
// 边框微圆角
.border {
  border: #999 solid 2rpx;
  border-radius: $mini-space;
}

.title {
  font-size: $title;
  font-weight: bold;
}
// 按钮清除默认margin
button.btn {
  font-size: $title;
  // 按钮宽度占满，同时与加边框的表单控件对齐
  &.fluid {
    width: 87vw;
  }
}
// margin盒子
.space {
  margin: $mini-space;
}
// 该类下的view会增加margin，以达到间隔的目的
.space-box {
  & > view,
  & > .view {
    margin: $space;
  }
}
// 灰色字体
.gray {
  color: #999;
}
// 双列瀑布流
.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  & > view {
    width: 270rpx;
    transition: all 0.3s;
    // 双列瀑布流，使用flex（justify-content: space-around）实现时，如果最后一行只有一个元素，默认是居中的。我们可以使用下面的样式让它左对齐
    &:nth-child(odd):last-child {
      margin-right: auto;
      margin-left: 20rpx;
    }
    // 点击时放大
    &:active {
      scale: 1.2;
    }
  }
}

.img {
  width: 100%;
}
// padding盒子，一般配合border类用于表单控件
.pdd {
  padding: $space;
}
// 单选框按钮样式
.radio .wx-radio-input {
  font-size: $font;
  width: $font;
  height: $font;
  padding: 0;

  .wx-radio-input-checked {
    &::before {
      // font-size: $font;
    }
  }
}
// 交叉轴拉伸排布
.stretch {
  align-items: stretch;
}

// 单行文本省略效果
// 注意 要实现ellipsis效果，除了要加上[overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 8rem;]外，display属性不能为flex，否则会失效
.ellipsis {
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 8rem;
}

展示案例

表单登录

<page-meta>
  <navigation-bar title="登录"></navigation-bar>
</page-meta>
<view class="container">
  <view class="col space-box stretch">
    <view class="row border"><input type="text" bindconfirm="submit" model:value="{{name}}" placeholder="请输入用户名" class="flex-1" /></view>
    <view class="row border"><input type="text" bindconfirm="submit" model:value="{{password}}" password placeholder="请输入密码" class="flex-1" /></view>
    <button class="view btn fluid" type="primary" bind:tap="submit">登录</button>
  </view>
</view>

效果：

简单flex首页

<page-meta>
  <navigation-bar title="首页示例"></navigation-bar>
</page-meta>
<swiper circular autoplay indicator-dots indicator-color="#fff" indicator-active-color="#07c160" interval="2000">
  <swiper-item wx:for="{{[1, 2, 3]}}" wx:key="index">
    <image src="https://p2.cri.cn/M00/8A/9B/rBABCWatYmuAEo0bAAAAAAAAAAA440.1024x706.jpg" mode="widthFix" style="width: 100%;height: 100%;" />
  </swiper-item>
</swiper>
<view class="container">
  <view class="top">
    <view class="row">
      <view class="row flex-1 border">
        <input type="text" bindconfirm="search" model:value="{{key}}" placeholder="关键词搜索" class="flex-1" />
        <icon type="search" bind:tap="search" />
      </view>
      <!-- <button class="btn space" bind:tap="publish" type="primary" size="mini">我要发布</button> -->
    </view>
  </view>
  <view class="list row">
    <view wx:for="{{[1, 2, 3]}}" wx:key="index" bind:tap="go" class="col border space space-y">
      <image class="img" src="https://p2.cri.cn/M00/8A/9B/rBABCWatYmuAEo0bAAAAAAAAAAA440.1024x706.jpg" mode="aspectFit" style="width: 270rpx; height: 180rpx" />
      <view class="title" style="height: 3rem; overflow: hidden; text-align: center; font-size: 32rpx;">
        奥运奥运奥运奥运奥运奥运奥运奥运奥运
      </view>
      <!-- 注意 要实现ellipsis效果，除了要加上[overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 8rem;]外，display属性不能为flex，否则会失效 -->
      <view class="ellipsis">
        奥运奥运奥运奥运奥运aodsaccf
      </view>
    </view>
  </view>
</view>

效果图：

规范对齐表单

<page-meta>
  <navigation-bar title="表单示例"></navigation-bar>
</page-meta>
<view class="container">
  <view class="col stretch">
    <view class="col stretch">
      <view>姓名</view>
      <input type="text" placeholder="请输入姓名" class="input border pdd flex-1" value="{{name}}" disabled="{{name}}" />
    </view>
    <view class="col stretch">
      <view>手机号</view>
      <input type="text" placeholder="请输入手机号" class="input border pdd flex-1" model:value="{{tel}}" />
    </view>
    <view class="col stretch">
      <view>性别</view>
      <radio-group bindchange="selectGender" class="input border pdd flex-1">
        <view class="row">
          <radio class="radio" value="男" checked />男
        </view>
        <view class="row">
          <radio class="radio" value="女" />女
        </view>
      </radio-group>
    </view>
    <view class="col stretch">
      <view>日期</view>
      <picker mode="date" bindchange="bindPickerChange" model:value="{{birthday}}" start="1949-10-01" end="{{today}}">
        <view class="picker">
          <input type="text" placeholder="请点击选择日期" class="input border pdd flex-1" value="{{birthday}}" disabled />
        </view>
      </picker>
    </view>
    <view class="col stretch">
      <view>照片</view>
      <button class="input border pdd flex-1 fluid btn" bind:tap="chooseAvatar" style="padding-top: 50rpx ; padding-bottom: 50rpx; font-size: 50rpx; margin: 0;">
        <text wx:if="{{!avatar}}" class="plus">+</text>
        <image src="{{avatar}}" wx:if="{{avatar}}" mode="aspectFit" class="img" />
      </button>
    </view>
    <view class="col stretch">
      <view>选项</view>
      <picker bindchange="chooseOpt" model:value="{{optIndex}}" range="{{opts}}" range-key="optName">
        <view class="picker">
          <input type="text" placeholder="请点击选择选项" class="input border pdd flex-1" value="{{opts[optIndex].optName}}" disabled />
        </view>
      </picker>
    </view>
    <view class="row">
      <button class="btn fluid" bind:tap="submit" type="primary">提交表单</button>
    </view>
  </view>
</view>

总结

好啦，这些示例应该够用了，其他的用法大家自行探索吧

更新

距离产生美

给上述表单的标签加上space类后，将会更加美观

<view class="space">照片</view>

按钮外置搜索框

<view class="row stretch">
    <input type="text" placeholder="关键词搜索" class="input border pdd flex-1" style="border-radius: 8rpx 0 0 8rpx;" />
    <button type="primary" size="mini" style="padding-top: 15rpx; border-radius: 0 8rpx 8rpx 0;">
      <icon type="search" color="#fff" />
    </button>
  </view>