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