碎冰stylus融 2019-06-29
第一次接触stylus
对于不使用{} ; 等符号,感觉还不太习惯。
而且层级之间的类,也要错落有致,不是统一排一列。额。。。。
但是它更简洁,规范,便于维护。
下边讲解几点内容
1、要给lang定义stylus
<style lang="stylus"> </style>
2、vue文件中引入stylus文件
<style lang="stylus"> @import '~assets/style/varibles.styl' </style>
3、自定义样式和使用
在styl文件中设置通用样式
$bgColor = #00bcd4
在vue中引用,$+name
<style lang="stylus"> @import '~style/varibles.styl' .header background-color: $bgColor </style>
在styl文件中将多个样式集合成一个样式
ellipsis() overflow: hidden white-space: nowrap text-overflow: ellipsis
在vue中引用,$+name
<style lang="stylus"> @import '~style/varibles.styl' .header background-color: $bgColor ellipsis() </style>
4、使用@media
// 最大330px @media (max-width : 330px) .home-index margin-top: -56% // 最大最小的多个使用 @media (max-width : 410px) and (min-width : 330px), (max-width : 630px) and (min-width : 510px) .home-index margin-top: -56%