1. thinkalot

    Posted

    thinkalot
Changes in title
+Emmet / Pug / Sass 雑記メモ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,243 @@
+Pug / Emmet / Sass の相性が良く 頻繁に利用するため 同じ記事に纏めました。
+
+# 参考
+
+## Emmet
+
+- Official
+ - cheetsheet : https://docs.emmet.io/cheat-sheet/
+ - keybinding : https://docs.emmet.io/actions/
+
+※ Emmet の keybinding(ショートカット) は Editorによって変わり 上記公式どおりにいかないケースが多く 自分でショートカットを見つけるか設定する必要があり 厄介です。
+
+```scss
+ pd //padding:;
+ pd1rem //padding: 1rem;
+ bd:n //border: none;
+ bdb1 //
+ jcsb //justify-content: space-between;
+ pos //position: relative;
+ posa //position: absolute;
+ maw //max-width:;
+ mih //min-height:;
+ tdn //text-decoration: none;
+ fx //flex:;
+ op.9 //opacity: 0.9 ;
+ tov //text-overflow: ellipsis;
+ of //overflow: hidden;
+ lis //list-style:;
+ z //z-index:;
+ trsde //transition-delay: time; - 変化開始までの時間
+ trsdu //transition-duration: time; - 変化開始から終了まで時間
+ trf //transform:;
+ trfr //transform: rotate(angle);
+```
+
+## Pug
+
+- Official
+ - [Attributes](https://pugjs.org/language/attributes.html)
+ - [GitHub - pugjs/pug](https://github.com/pugjs/pug)
+ - [GitHub - Jade 日本語解説](https://gist.github.com/japboy/5402844)
+- Qiita
+ - [PugでHTMLコーディングを効率化・メリットと使い方を知る](https://tech.qookie.jp/posts/info-pug-feature/) @qrac
+ - [Pugと仲良くする方法](https://qiita.com/garakuta/items/c83548c74e45838e3fe0) @garakuta
+ - [Jadeの記法について(あまりまとまっていない)](https://qiita.com/sasaplus1/items/189560f80cf337d40fdf)@sasaplus1
+ - [Pug(Jade)の基本記法について](https://qiita.com/cotolier_risa/items/135d168eddd6ae6c3409) @cotolier_risa
+ - [Pug(Jade)の応用記法について](https://qiita.com/cotolier_risa/items/519b9182be8dda61da65#_reference-489b26ab83d6aa5a28b1) @cotolier_risa
+ - [PUG(was JADE)使い倒しメモ](https://qiita.com/ichimonji_haji/items/4eff56ec19c5cfc61468) @ichimonji_haji
+ - [Pug(Jade)記法でHTMLのテンプレート的なの](https://qiita.com/soarflat/items/a80bdca813ae83bc9ebc) @soarflat
+ - [Pugの改行`<br>`のはなし](https://qiita.com/nanarya/items/2beb75c58e42cc0c5915) - @nanarya
+- [話題のPugを使ってみた / カルチャーアカデミア広島](https://cultureacademia.jp/webcreate/312/)
+
+
+
+# HTML
+
+```:emmet
+ li*2>a.nav_a[href="#work$"]{Work}
+```
+```:pug
+ li: a.nav_a(href="#work1") work
+ li: a.nav_a(href="#work2") work
+```
+```html:html
+ <li><a class="nav_a" href="#work3">Work Ⅰ</a></li>
+ <li><a class="nav_a" href="#work4">Work Ⅱ</a></li>
+```
+
+# Pug
+
+## インラインタグ
+
+```html:html出力結果
+<p><b>HTML形式タグ</b>をテキスト内に入力</p>
+```
+
+#### 1. HTML形式タグをテキスト内に入力
+
+```:pug
+p <b>HTML形式タグ</b>をテキスト内に直接入力
+```
+
+#### 2. インターポレーション #[] で囲う
+
+```:pug
+p #[b HTML形式タグ]をテキスト内に直接入力
+```
+
+#### 3. パイプライン | を使って改行する
+
+```:pug
+p
+ b HTML形式タグ
+ | をテキスト内に直接入力
+```
+
+## コメント
+
+#### HTML出力(コンパイル)する
+
+```:pug
+// ハイフン(-)なしコメントアウトはコンパイルされる<br>
+ インデントネスト箇所も自動的にコメントアウトされる
+```
+```html:html
+<!-- ハイフン(-)なしコメントアウトはコンパイルされる。インデントネスト箇所も自動的にコメントアウトされる。 -->
+```
+
+#### HTML出力(コンパイル)しない
+```:pug
+//- ハイフン(-)付きコメントアウトはコンパイルされない
+```
+```html:htmlに出力されない
+
+```
+
+※ Pugは1行全てがコメントアウトされる。文末にコメントを残せない。
+
+## テキスト化
+
+#### タグ直後に . ドット。下層インデントを | なしで
+
+```pug:pug
+p.
+ Pug is a terse and simple templating language
+```
+```html:html
+<p>Pug is a terse and simple templating language</p>
+```
+
+## 変数
+
+- var 変数名 = "値" で定義
+**#{変数名}** で利用
+
+```pug:pug
+- var day = "水曜"
+p 今日は#{day}です
+```
+```html:html
+<p>今日は水曜です</p>
+```
+
+## Mixin
+
+Mixins – Pug
+https://pugjs.org/language/mixins.html
+
+### Mixin 1 - 単純なタグ/テキスト代入
+
+```
+mixin list
+ ul
+ li foo
+ li bar
++list
++list
+```
+```html:html
+<ul>
+ <li>foo</li>
+ <li>bar</li>
+</ul>
+<ul>
+ <li>foo</li>
+ <li>bar</li>
+</ul>
+```
+
+### Mixin 2 - タグ直後に = で 引数をテキスト化
+※ pet と = の間にスペース無し。スペース入れると = から後ろがテキスト化してしまう。
+
+```pug:pug
+mixin pet(name)
+ li.pet= name
+ul
+ +pet('cat')
+ +pet('dog')
+```
+```html:html
+<ul>
+ <li class="pet">cat</li>
+ <li class="pet">dog</li>
+</ul>
+```
+
+# Mixin 3 - Block
+
+mixin block = 下層コンテンツ
+
+```:pug
+mixin article(title)
+ .article
+ h1= title
+ if block
+ block
+ else
+ p No block text
+
+//blockが無い場合
++article('No Block')
+
+//blockがある場合
++article('Yes Block')
+ p This is my
+ p Yes block text
+```
+```html:html
+<!--blockが無い場合-->
+<div class="article">
+ <h1>No Block</h1>
+ <p>No block text</p>
+</div>
+<!--blockがある場合-->
+<div class="article">
+ <h1>Yes Block</h1>
+ <p>This is my</p>
+ <p>Yes block text</p>
+</div>
+```
+
+# Mixin 4 -
+
+```:pug
+mixin article(title='Default Title')
+ .article
+ h1= title
+
++article()
+
++article('Hello world')
+
+```
+```
+<div class="article">
+ <h1>Default Title</h1>
+</div>
+<div class="article">
+ <h1>Hello world</h1>
+</div>
+```
+
+<br><br>