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%
相关推荐
VLilyLUE 2020-06-11
StylusGalaxy 2020-04-29
前端工程师喻文强 2020-04-27
nicepainkiller 2020-02-23
xuelang 2020-01-16
Stylusnebula 2019-12-26
界之边缘的轮回 2019-12-11
VLilyLUE 2019-12-08
didianmanong 2019-11-17
CaiKanXP 2019-11-10
StylusGalaxy 2019-11-09
flyingbird 2019-11-08
星辰的笔记 2016-04-25
Stylusnebula 2019-08-31
碎冰stylus融 2019-07-01
zhouyl0 2019-07-01
Stylusnebula 2019-07-01
crazestylus 2019-07-01
碎冰stylus融 2019-07-01