stylus快速上手

Posted 2022-12-27 vcplus

• 定义变量，比如一键切换主题色

　　　　1.创建xxx.styl文件，定义变量

$bgColor = #00bcg4

　　　　2.在其他页面的style区域里，先引入这个xxx.styl文件

<style>
    @import ‘../../xxx.styl‘  //样式中引入样式，要在import前加@
    .header
        height:3rem
        width:.87rem
　　　　 color：$bgColor
</style>

• 层级嵌套形式的书写样式，而不必像css一样加一堆的父级限制，直接嵌进父级

  .header
  　　display:felx
  　　height:80px
  　　width:100px
  　　.header-left
  　　　　line-height:60px
             height:60px
  　　　　float:left
  　　.header-right
  　　　　wigth:30px

• scoped关键字限制了这里的样式只对当前页面有效

  <style lang="stylus" scoped>