使用-Pug-和-Stylus-的-Vue-组件示例，以及一些-pug、-stylus-的使用技巧 - 《代码人生》

[TOC]

资源

原文地址墙外
 原文 github 地址
 本文 github 地址

正文

主要是搬运了人家的示例代码，这样的写法好处不言而喻

运行前需要装一下相应的编译的包 ``` yarn add pug pug-plain-loader stylus stylus-loader —dev


- 主要的源码部分


- 这个还可以和 `element-ui` 结合使用的哦，示例代码

.mytable el-table el-table-column(label=”日期”) el-table-column(label=”姓名”) el-table-column(label=”地址”)

## 更新一些 `pug` 的使用语法

1. 在标签中嵌入标签的写法示例

> [参考教程：标签嵌入](https://pug.bootcss.com/language/interpolation.html#tag-interpolation)

span.title-tooltip 本月即将到期专线 #[span.data-number 5] 条

![生成的代码截图](https://upload-images.jianshu.io/upload_images/9064013-d267c69c0d6e20ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
## 更新一些 `stylus` 的使用语法

> [`for in` 循环文档参考地址：Stylus 中文网](http://stylus-lang.com.cn/docs/iteration)


1. 使用 `for in` 循环设置样式

> [stylus中文文档 » 插值(Interpolation) » 张鑫旭-鑫空间-鑫生活](https://www.zhangxinxu.com/jq/stylus/interpolation.php)


- 部分源码示例

    position relative
      for index in (1..10)
        &:nth-child({index})
          &:before
            content '' + index
            position absolute
            left 5px
            width 30px
            height 30px
            line-height 30px
            background-color rgba(247,191,71,0.31);
            border-radius 50%
            text-align center
            color #D0021B
            font-size 16px


- 效果图

> ![页面展示效果](https://upload-images.jianshu.io/upload_images/9064013-6e2ab9d5178a8ef4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2. 使用 `for in` 循环设置背景图片
- 部分源码

      .pillar-filter
        for index in (0..3)
          &>div:nth-child({index + 2})
            .item-title
              &:before
                background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-'+ index +'.png') center center no-repeat;

      .dragon-filter
        for index in 4 5 6 7 8
          &>div:nth-child({index - 2})
            .item-title
              &:before
                background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-' + index + '.png') 0 center no-repeat;


- 效果图

> ![.pillar-filter](https://upload-images.jianshu.io/upload_images/9064013-f94408e2ab544044.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
![.dragon-filter](https://upload-images.jianshu.io/upload_images/9064013-4862df1bd5f47891.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


3. 使用 `for in` 循环使用不同的名称

nameList = success fail for name, index in nameList .yun-icon-{name} background url(‘~@/assets/common/icon-‘ + name + ‘.png’) center center no-repeat


4. 带有入参的 `mixin` 变量

// app 相关的公用 css 变量 // 带描边和背景的常用 label 标签 app-layout-label($text-color = $app-main-color, $bg-color = $app-main-bg-color) color $text-color font-size 20px min-width 92px text-align center height 40px line-height @height padding 0 20px border 1px solid $text-color background-color $bg-color border-radius 8px flex 0 0 auto

// 右上角定位标签，父级标签需要设置相对定位 app-position-right-label($text-color = $app-main-color, $bg-color = rgba(79, 172, 254, 0.12)) position absolute right 0 top 0 min-width 98px height 40px line-height @height text-align center font-size 24px color $text-color background $bg-color border-radius 0px 0 0px 8px // 32 和 24 是根据 van-cell—large 的 padding 算出来的 transform translate(32px, -24px) // 页面底部固定的悬浮操作按钮，页面容器要设置 padding: 0 0 180px 0 app-fixed-bottom-button-group($bg-color = #f9f9fb, $justify-content = center) position fixed z-index 2 bottom 0 left 0 right 0 height 180px background $bg-color border-radius 8px font-size 36px font-weight 500 text-align center display flex justify-content $justify-content padding 20px 40px 0 app-fixed-bottom-button($text-color = $app-button-color, $bg-color = rgba(246, 251, 255, 1), $border-color = rgba(140, 199, 255, 1), $flex-style = 0 1 100%) flex $flex-style height 100px line-height @height color $text-color background $bg-color border 2px solid $border-color border-radius 8px // 页面右侧固定的悬浮操作按钮 app-fixed-right-button-group($bg-color = linear-gradient(225deg, rgba(0, 200, 254, 1) 0%, rgba(79, 172, 254, 1) 100%), $justify-content = center) position fixed z-index 2 bottom 0 right 48px min-width 96px height 96px transform translateY((-(@height / 2))) border-radius 96px padding 0 20px background $bg-color font-size 24px color #fff text-align center display flex justify-content $justify-content flex-direction column // 内容禁用置灰函数 app-disable-grayscale() filter grayscale(100%) -webkit-filter grayscale(100%) -moz-filter grayscale(100%) -ms-filter grayscale(100%) -o-filter grayscale(100%) -webkit-filter grayscale(1)

// 自定义关闭按钮 css-close-btn($width = 20px, $height = 20px, $bgcolor = $main-red-light, $linewidth = 2px, $lineheight = 12px, $linebgcolor = #fff) background-color $bgcolor width $width height $height border-radius 50% position relative cursor pointer &:before content ‘’ position absolute width $linewidth height $lineheight background-color $linebgcolor top 50% left 50% transform translate(-50%, -50%) rotate(45deg) &:after content ‘’ position absolute width $linewidth height $lineheight background-color $linebgcolor top 50% left 50% transform translate(-50%, -50%) rotate(-45deg)

// 清除浮动 clearfix() // IE6/7 zoom 1 &:after content ‘ ‘ display block height 0 clear both // 文本单行溢出隐藏 textoneline() overflow hidden white-space nowrap text-overflow ellipsis // 文本多行溢出隐藏 -webkit-line-clamp: 2; 溢出行数 textmoreline($-webkit-line-clamp = 2) display -webkit-box -webkit-box-orient vertical overflow hidden text-overflow ellipsis -webkit-line-clamp $-webkit-line-clamp

```