在vue中使用varibles和mixin优化CSS代码

我们可以将一些项目中经常用到的CSS样式封装成变量
从而提高CSS代码的可复用性

对于单独的CSS属性，使用varibles

在assets/style目录下，新建 varibles.styl 文件
将属性值赋给自定义的变量

$bgColor = #00bcd4
$headerHight = .86rem

然后在.vue文件的style标签内引入并使用它

<style lang="stylus" scoped>
  @import '../../assets/styles/varibles.styl'
  .header
    display: flex
    line-height: $headerHight
    background: $bgColor
    color: #fff
</style>

对于同时出现的多个CSS属性，使用mixin

在assets/style目录下，新建 mixin.styl文件
举个例子：当文本内容的长度超过规定的显示区域时
我们希望超出的部分以 '...' 的形式呈现
此时就可以将下列几个CSS属性封装成一个变量

ellipsis()
  overflow: hidden
  white-space: nowrap
  text-overflow: ellipsis

然后在 .vue文件的style标签内引入并使用它

<style lang="stylus" scoped>
  @import '../../assets/styles/varibles.styl'
  @import '../../assets/styles/mixins.styl'
    .icon-desc
      position: absolute
      bottom: 0
      left: 0
      right: 0
      height: .44rem
      line-height: .44rem
      text-align: center
      color: $darkTextColor
      ellipsis()
</style>