stylus定义变量、代码片段及使用方法

以Vue.js开发去哪儿网旅游网站全纪录为例，介绍stylus定义变量和使用方法

一、变量定义和应用

在src/assets/styles目录下新建varibles.styl文件

定义

$bgColor = #ff0000

在组件的style中引入文件

@import '~styles/varibles.styl'

备注：上面的styles是在vue.config.js中设置的@/assets/styles路径的别名，在css中引用必须加前缀~

引入后，即可在styles的css中直接书写

background $bgColor
color $bgColor

这样就能达到一处定义，多处生效的效果

二、定义代码片段并使用

在src/assets/styles目录下新建mixins.styl文件

ellipsis()
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis

以上代码表示超出内容以...省略

在组件的style中引入文件

@import '~styles/mixins.styl'

在styles的css直接书写即可

.title
    color #333
    ellipsis()