1. thinkalot

    No comment

    thinkalot
Changes in title
-Emmet / Pug / Sass 雑記メモ
+Emmet / Pug / Stylus / CSS 雑記メモ
Changes in body
Source | HTML | Preview

Pug / Emmet / Sass の相性が良く 頻繁に利用するため 同じ記事に纏めました。

参考

Emmet

※ Emmet の keybinding(ショートカット) は Editorによって変わり 上記公式どおりにいかないケースが多く 自分でショートカットを見つけるか設定する必要があり 厄介です。

  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:;
  list    //list-style-type: disc;
  z       //z-index:;
  trsde   //transition-delay: time; - 変化開始までの時間
  trsdu   //transition-duration: time; - 変化開始から終了まで時間
  trf     //transform:;
  trfr    //transform: rotate(angle);

Pug

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
        <li><a class="nav_a" href="#work3">Work Ⅰ</a></li>
        <li><a class="nav_a" href="#work4">Work Ⅱ</a></li>

Pug

インラインタグ

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出力(コンパイル)しない

pug
//- ハイフン(-)付きコメントアウトはコンパイルされない
htmlに出力されない

※ Pugは1行全てがコメントアウトされる。文末にコメントを残せない。

テキスト化

タグ直後に . ドット。下層インデントを | なしで

pug
p.
  Pug is a terse and simple templating language 
html
<p>Pug is a terse and simple templating language</p>

変数

  • var 変数名 = "値" で定義
    #{変数名} で利用
pug
- var day = "水曜"
p 今日は#{day}です
html
<p>今日は水曜です</p>

Mixin

Mixins – Pug
https://pugjs.org/language/mixins.html

Mixin 1 - 単純なタグ/テキスト代入

mixin list
  ul
    li foo
    li bar
+list
+list
html
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Mixin 2 - タグ直後に = で 引数をテキスト化

※ pet と = の間にスペース無し。スペース入れると = から後ろがテキスト化してしまう。

pug
mixin pet(name)
  li.pet= name
ul
  +pet('cat')
  +pet('dog')
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
<!--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>



CSS

テキスト折返し関連

//改行しない
  white-space: nowrap;

//単語単位で改行
  white-space: normal;
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  white-space: break-spaces;

  word-break: normal;
  word-break: keep-all;

  overflow-wrap: normal;
  overflow-wrap: anywhere;

//改行
  word-break: break-all;
  word-break: break-word;

  overflow-wrap: break-word;

::before / ::after によるアイコン挿入テンプレ

css
&::before{
 display: inline-block;
 content: "";
 background: url("/jreast-shinkansen-reservation/ja/reserve/img/select_ticket_pass/checkmark.png") no-repeat;
 width: 1rem;
 height: 1rem;
 background-size: contain;
 vertical-align: middle;
}

Stylus

変数利用時は : ではなく = で代入

stylus
 margin_bottom = 10px
 $margin_bottom = 10px