VUE使用Stylus插件

时间 2019-12-05

标签 vue 使用 stylus 插件繁體版

原文原文链接

第一次接触stylus
对于不使用{} ; 等符号，感受还不太习惯。
并且层级之间的类，也要错落有致，不是统一排一列。额。。。。
可是它更简洁，规范，便于维护。vue

下边讲解几点内容spa

一、要给lang定义styluscode

<style lang="stylus">

</style>

二、vue文件中引入stylus文件ip

<style lang="stylus">
@import '~assets/style/varibles.styl'

</style>

三、自定义样式和使用it

在styl文件中设置通用样式import

$bgColor = #00bcd4

在vue中引用，$+namestylus

<style lang="stylus">
@import '~style/varibles.styl'
.header
  background-color: $bgColor
</style>

在styl文件中将多个样式集合成一个样式引用

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

在vue中引用，$+nameim

<style lang="stylus">
@import '~style/varibles.styl'
.header
  background-color: $bgColor
  ellipsis()
</style>

四、使用@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%