问题描述：

input框的内容单独设置了背景色和字体颜色之后，和search框的背景与字体颜色是不是可以封装成一个mixin，或者写到viriables文件中？我有点搞不清什么时候弄成mixin，什么时候封装成单独的css再引入

相关截图：

相关代码：App.vue

<template>
  <div class="wrapper">
    <div class="position">
      <span class="iconfont position__icon">&#xe619;</span>
      北京理工大学国防科技园2号楼10层
      <span class="iconfont position__notice">&#xecaa;</span>
    </div>
    <div class="search">
      <span class="iconfont">&#xe61a;</span>
      <input type="text" class="search__text" value="山姆会员商店优惠商品"/>
    </div>
    <div class="banner">
      <img
        class="banner__img"
        src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
        alt=""
      />
    </div>
  </div>
  <div class="docker">
    <div class="docker__item docker__item--active">
      <div class="iconfont">&#xe607;</div>
      <div class="docker__title">首页</div>
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe638;</div>
      <div class="docker__title">购物车</div>
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe7c5;</div>
      <div class="docker__title">订单</div>
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe610;</div>
      <div class="docker__title">我的</div>
    </div>
  </div>
</template>

<style lang="scss">
// scss区域引入另外一个scss的变量文件（一些通用的css）
@import "./style/viriables.scss";
// 将文字不换行显示……封装成一个mixin，引入mixins.scss文件
@import "./style/mixins.scss";
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  padding: 0 .19rem;
}
.position {
  position: relative;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  @include ellipsis;
  .position__icon {
    position: relative;
    font-size: .2rem;
    top: .01rem;
  }
  .position__notice {
    position: absolute;
    right: 0;
    font-size: .2rem;
    top: .17rem;
  }
  color: $content-fontcolor;
}
.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: #f5f5f5;
  border-radius: .16rem;
  color: #b7b7b7;
  .iconfont {
    position: relative;
    font-size: .18rem;
    display: inline-block;
    top: .02rem;
    padding: 0 .1rem 0 .16rem;
  }
  .search__text {
    display: inline-block;
    font-size: .14rem;
    // 去除input默认边框
    border:none;
    // outline:none;
    // input标签有默认color和background，无法继承父元素样式，需单独设置字体&背景颜色。
    background: #F5F5F5;
    color: #b7b7b7;
  }
}
.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img {
    width: 100%;
  }
}
.docker {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  height: .49rem;
  width: 100%;
  border-top: .01rem solid #f1f1f1;
  color: $content-fontcolor;
  &__item {
    flex: 1;
    text-align: center;
    .iconfont {
      font-size: .18rem;
      margin: .07rem 0 .02rem 0;
    }
    &--active {
      color: #1fa4fc;
    }
  }
  &__title {
    // Chrome浏览器解析字体最小为12px，需修改为10px，太小了所以显示的是最小12px。
    font-size: .2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>