zoukankan      html  css  js  c++  java
  • Jade之Mixins

    Mixin

    mixin允许我们对某一个块的重复使用,类似于函数。
    用法:首先声明mixin,然后使用(在mixin名字之前加+即可以使用)即可。

    最简单的mixin

    jade:

    //- 声明
    mixin list
      ul
        li foo
        li bar
        li baz
        
    //- 使用
    +list
    +list
    

    html:

    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
    

    带参数的mixin

    mixin支持传入参数,根据参数来改变块内容。

    jade:

    mixin pet(name)
      li.pet= name
    ul
      +pet('cat')
      +pet('dog')
      +pet('pig')
    

    html:

    <ul>
      <li class="pet">cat</li>
      <li class="pet">dog</li>
      <li class="pet">pig</li>
    </ul>
    

    mixin块

    mixin使用时,也可以包含一个块。通过判断,可以使内容不同。

    jade:

    mixin article(title)
      .article
        .article-wrapper
          h1= title
          //- 如果mixin含有块,则为块内容
          if block
            block
          else
            p No content provided
    
    +article('Hello world')
    
    +article('Hello world')
      p This is my
      p Amazing article
    

    html:

    <div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>No content provided</p>
      </div>
    </div>
    <div class="article">
      <div class="article-wrapper">
        <h1>Hello world</h1>
        <p>This is my</p>
        <p>Amazing article</p>
      </div>
    </div>
    

    mixin attributes

    jade允许将隐性属性变量传入mixin

    jade:

    mixin link(href, name)
      a(class!=attributes.class, href=href, id!=attributes.id)= name
    
    +link('/foo', 'foo')(class="btn" id="qaq")
    

    html:

    <a href="/foo" class="btn" id="qaq">foo</a>
    

    在jade代码中,因为class属性和id属性已经逃逸,所以在mixin中需要使用!=,或者也可以使用&attributes

    多参数

    jade的mixin的形参可以为多个,即使未知多少个也可以。

    jade:

    mixin list(...name)
    	each i in name
    		p my name is #{i}
    
    +list('Tom', 'Jack', 'Jim', 'Alice', 'Allen')
    

    html:

    <p>my name is Tom</p>
    <p>my name is Jack</p>
    <p>my name is Jim</p>
    <p>my name is Alice</p>
    <p>my name is Allen</p>
    
  • 相关阅读:
    算法:二分图最大独立集
    算法:桶排序
    算法:二分图最小点覆盖——Konig定理
    jQuery基础整理之思维导图
    vue基础知识整理
    HTML总结
    JAVAScript总结
    栈和队列
    今日学习遇到的问题(2018.9.23)
    看了vue文档之后。。。。
  • 原文地址:https://www.cnblogs.com/wsy06/p/4986218.html
Copyright © 2011-2022 走看看