turusuke

登壇用 playground

記事データ

const article = {
  title: 'タイトル',
  category: 'post',
  published: '2019-01-12',
  tags: ['blog', 'food'],
  content: '今日はいい天気',
}

turusuke

hub browse -- pull/$(hub pr list | fzf | grep -o -E "[0-9]+\d" | head -n1)

turusuke

Nunjucks - 入門編

• 入門編のこの記事の内容、サンプルコードは Nunjucks に書いてある内容を参考・一部引用し作成している
• テンプレート継承周りの話は別に書く予定なので、この記事では関連するテンプレートタグにも触れていない

---

Nunjucks とは

• Nunjucks は Python のテンプレートエンジン Jinja2 に影響を受けているテンプレートエンジンで、Mozilla が継続的にメンテナンスをしている
• 記法は EJS に近く、HTML テンプレートに {% set greeting = "HELLO" %} のように用意されている独自タグを使うことができる
• EJS よりもテンプレートエンジンとして役にたつ機能が多数用意されているが、記法が JavaScript とも違っている書き方になっているもの多い
• テンプレートエンジンを触ってこなかった人にとってはとっつきにくいと感じる人が多いかもしれない

シンタックスハイライト

turusuke

$grid-total-size: 12 !default;
$max-width: 100% !default;
$prefix: "" !default;
$col-name-default: "col" !default;
$grid-size: "#{$max-width} / #{$grid-total-size}" !default;
$breakponts: (
  "xs": "(max-width: 600px)",
  "sm": "(min-width: 601px) and (max-width:960px)",
  "md": "(min-width: 961px) and (max-width:1264px)",
  "lg": "(min-width: 1265px) and (max-width:1903px)",

turusuke

$total-margins: 20 !default;
$margin-unit: 3 !default;
$prefix: 'u-' !default;

@mixin margin() {
  @for $index from 1 through $total-margins {
    $margin-size: $index * 3;
    $base-names: '.p-mt-#{$margin-size}' '.p-ml-#{$margin-size}';
  
    @each $base-name in $base-names {