ミックスイン

ジェイドのミックスイン



Jades Mixins



混入します

mixinを使用すると、同様の機能のブロックを再利用できます。
使用法：最初のミックスイン、次に （名前mixinの前に追加+使用可能） かもね。

最も簡単なミックスイン

翡翠：



// - statement mixin list ul li foo li bar li baz // - Use +list +list

html：

  • foo
  • bar
  • baz
  • foo
  • bar
  • baz

ミックスイン引数

ミックスインは入力パラメーターをサポートし、ブロックはパラメーターの内容に応じて変更されます。



翡翠：

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

html：

  • cat
  • dog
  • pig

ミックスインブロック

ミックスインを使用する場合、ブロックを含むこともあります。決定により、内容を変えることができます。



翡翠：

mixin article(title) .article .article-wrapper h1= title // - If mixin block contains, for the block content if block block else p No content provided +article('Hello world') +article('Hello world') p This is my p Amazing article

html：

This is my

Amazing article

ミックスイン属性

翡翠は、渡される暗黙のプロパティ変数を許可しますmixin。

翡翠：

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

html：

foo

翡翠コードでは、クラス属性に属性IDとエスケープがあるため、ミックスイン!=を使用する必要があります。または、&attributesを使用することもできます。

マルチパラメータ

パラメータのヒスイミックスインは、数が不明な場合でも複数である可能性があります。

翡翠：

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

html：

my name is Tom

my name is Jack

my name is Jim

my name is Alice

my name is Allen