强大的css预编译stylus以及在vue中使用stylus

由于一些原因,接触到了stylus这个css预编译语言,这里简单的做一些记录。

引用stylus官网中的一句话:富于表现力、动态的、健壮的 CSS
stylus是一个强大的css预编译语言,stylus支持省略花括号,支持省略分号,代码整洁,支持引入,并且支持语法内函数。

官方地址:https://stylus.bootcss.com/
GitHub地址:https://github.com/stylus/stylus/

mixin.styl:

//配置背景图片函数
bg-image($url)
  background-image: url($url + "2.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "3.png")

variable.styl

// 颜色定义规范
$color-theme = #ffcd32

//字体定义规范
$font-size-medium = 14px

content.vue

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/mixin"
  @import "~common/stylus/variable"
    .recommend-list
      .list-title
        height 300px
        width 100%
        font-size $font-size-medium
        color $color-theme
      .item
        padding 0 20px 20px 20px
        background bg-image('../images/bg.png')
        &.active
          color #fff
</style>

使用非常简单
安装stylus,使用npm安装,stylus和stylus-loader,一个都不能少
npm install stylus stylus-loader --save-dev
使用的话分为两种,一种是直接在vue中的style模块中使用,这时在style模块中中规定好就可以了
<style lang="stylus" rel="stylesheet/stylus"></style>
还有一种是作为.styl文件引入
把css内容放在styl文件中,然后在vue的style模块中通过@import引入

content.styl

.recommend-list
      .list-title
        height 65px
        line-height 65px
        text-align center
        font-size $font-size-medium
        color $color-theme
      .item
        display flex
        box-sizing border-box
        align-items center
        padding 0 20px 20px 20px
        background bg-image('../images/bg.png')
        &.active
          color #fff

content.vue

<style>
  @import "content.styl"
</style>

人已赞赏
Vue

vue-echarts:柱状图/饼状图Vue.js插件

2020-10-28 0:22:22

Vue

Vue打包以后怎么在本地预览

2020-11-11 17:35:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索