stylus之如何用混合方式写css样式来简化代码

stylus之如何用混合方式写css样式来简化代码

当有许多样式重复的代码时，难免会显得繁杂，例如下面这样，有很多重复的样式

<div class="normal">
  <button class="large"></button>
  <button calss="xlarge"></button>
</div>

.nomal
  width 64px
  height 36px
  font-size 0.875rem
  padding 0 16px
  border 0 solid black 
  border-radius 4px
  color #17233d
  background-color #2d8cf0
  font-size 0.875rem
 

.large
  width 100px
  height 70px
  font-size 0.775rem

.xlarge
  width 120px
  height 90px
  font-size 0.675rem

这里如果我们用混合方式写会清晰很多，也是写在style标签中：

clear(width,height,fontSize)
  width width
  height height 
  font-size fontSize 

那么当后面需要width、height、font-size时，我们就可以直接传值，它类似于函数但不是函数
例如上面button的样式可以这样写：

.normal
  clear(64px,36px,0.875rem)
  padding 0 16px
  border 0 solid black 
  border-radius 4px
  color #17233d
  background-color #2d8cf0
  font-size 0.875rem
 

&.large
  clear(100px,70px,0.775rem)

&.xlarge
  clear(120px,90px,0.675rem)
  

其中&的意思表示的是，当normal类是他们父级元素的样式时
当同时拥有normal类和large类时，会按照large类重新调整大小样式
当同时拥有normal类和xlarge类时，会按照xlarge类重新调整大小样式