浅谈 stylus--＞mixin

想知道stylus和mixin是什么意思，就需要先知道它们存在的原因——
为了使css变得更加可维护，简单来说，就是可以在css中用变量定义特定属性值，可以用函数定义对css进行封装。

关于变量，创建vribales.styl文件，代码：

$bgColor = #00bcd4
$darkTextColor = #333
$headerHeight = .86rem

关于封装，mixin可以使css中一段样式代码封装在函数定义里，同样的，也是在.styl文件进行定义：mixin简单讲就是函数定义。（当然这不是很准确的说法）。
mixins.styl代码：

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

写完这些styl文件后，在< style >标签中可以通过@import引入这些文件。
（关于stylus如何使用需移步链接：https://blog.csdn.net/weixin_43754182/article/details/124287454?spm=1001.2014.3001.5502）
代码如下：（这里的 color: $darkTextColor和ellipsis()都是引入styl文件的用法)

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
    margin-top: .1rem
    .icon
      position: relative
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          display: block
          margin: 0 auto
          height: 100%
      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        height: .44rem
        line-height: .44rem
        text-align: center
        color: $darkTextColor
        ellipsis()
</style>