VUE使用Stylus插件

第一次接触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%

脚本宝典为你提供优质服务
脚本宝典 » VUE使用Stylus插件

发表评论

提供最优质的资源集合

立即查看 了解详情