小技巧：placeholder

• 项目中，我在某个子元素的样式上用了 float ，那么它的父元素一定要 clearfix 。所以，为了提高工作效率，我可以用 placeholder。

• 代码举例， x目录/views/Money.vue 有以下代码

<div class="buttons">
  <button>1</button>
  <button>2</button>
  <button class="zero">0</button>
</div>

<style lang="scss" scoped>
@import "~@/assets/style/helper.scss";

.buttons {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
  > button {
      width: 25%;
      height: 64px;
      float: left;

      &.zero {
        width: 25*2%;
    }
}

• 我需要给 button 的父元素 buttons 添加 clearfix

方法

• 举例，我在 x目录/assets/style/helper.scss 下写入如下代码

// placeholder

%clearfix{
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}

• 然后就可以在 Money.vue 中给父元素 buttons 添加 clearfix 了

• @extend %clearfix 的意思就是，把 .buttons 这个选择器复制到 helper.scss 下，替换掉代码里的 %clearfix，相当于如下代码

.buttons {
  &::after{
    content: '';
    clear: both;
    display: block;
  }
}

• 再引入到 Money.vue 下生效