脚本宝典收集整理的这篇文章主要介绍了

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插件

全部内容,希望文章能够帮你解决

VUE使用Stylus插件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过