turusuke turusuke

Nunjucks - 入門編

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

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

	$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 {

	$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)",

	" =============================================================
	" Global Configuration
	" =============================================================
	set surround
	set multiple-cursors " vim-multiple-cursors と同等の機能を実現する

	" =============================================================
	" Clipboard
	" =============================================================
	" クリップボードと yank を同期させる

	console.log(1);
	console.log(2);