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类重新调整大小样式

猜你喜欢

转载自blog.csdn.net/bubbleSweet/article/details/113002098