Emmet / Pug / Stylus / CSS / jQuery 雑記メモ


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

# 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

## コンパイル時 オプションに --pretty で整形出力可能

ただし公式ではバグが多いので廃止予定とのことなので
本番アップ時は利用非推奨
en : https://pugjs.org/api/reference.html
jp : https://tr.you84815.space/pug/api/reference.html

```terminal
$ pug --watch *.pug --pretty
```

## エディターインデントは スペース と タブ の混入で コンパイルエラー発生

Invalid indentation, you can use tabs or spaces but not both

<img width="142" alt="Screen Shot 2019-10-26 at 17.38.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/c2ca7cd1-47f6-eddb-fca2-852c9b7aa899.png">
<img width="774" alt="Screen Shot 2019-10-26 at 17.39.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/39646d66-5ee7-aeba-a588-868f90519413.png">
<img width="725" alt="Screen Shot 2019-10-26 at 17.44.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/11fee817-de40-4834-70c8-b1213868bbef.png">
統一が重要。
まぁ最近では 半角スペース2つ = 1 ソフトタブ が推奨気味


## Atomエディターハイライトにはパッケージインストール必要

<img width="741" alt="Screen Shot 2019-10-26 at 17.20.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/5e10ea71-c710-1b9c-206d-d538e1862f39.png">


## インラインタグ

```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は１行全てがコメントアウトされる。文末にコメントを残せない。

## テキスト化

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

```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>
```


## 参考

- 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 
- etc
    - [Pugドキュメント翻訳 | Pug - にほんご。](https://tr.you84815.space/pug/)
    - [話題のPugを使ってみた / カルチャーアカデミア広島](https://cultureacademia.jp/webcreate/312/) 
<br><br>

# CSS

## テキスト折返し関連

```scss

//改行しない
  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: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

## インストールは Sudo が必要だった

error : WARN checkPermissions Missing write access to /usr/local/lib/node_modules
<img width="801" alt="Screen Shot 2019-10-26 at 17.13.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/19122883-b9c8-428f-bee7-6d186b9cb71a.png">
<img width="671" alt="Screen Shot 2019-10-26 at 17.12.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/0a8f1848-dbdd-1f3a-b774-52d40ac41715.png">


## 変数は : ではなく = 
CSSやSassと互換性がある Stylus だが 
変数表記は違うので完全互換ではない点に注意
 : ではなく **=** で代入

```:stylus
 margin_bottom = 10px
 $margin_bottom = 10px
```

## コンパイルコマンドは --watch 利用可能

[Executable — Stylus](http://stylus-lang.com/docs/executable.html )

```terminal:mac_terminal
$ stylus --watch style.styl
  watching /usr/local/lib/node_modules/stylus/lib/functions/index.styl
  compiled style.css
  watching style.styl
```

## Atomエディターハイライトにはパッケージ必要

<img width="741" alt="Screen Shot 2019-10-26 at 17.20.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122142/a4f73696-3bca-e923-9e50-48dfb8dccf22.png">


## 参考

- [Stylus入門したときのまとめ](https://qiita.com/morishitter/items/b9a2d78c79c3c07de776) 
- [Stylus入門](https://qiita.com/kubotak/items/18abd6eba7e3daaba054)


# jQuery

## 参考

- [jQueryでリストなどに連番でIDやクラスを追加（ナンバリング）する方法 2011/05/17](http://black-flag.net/jquery/20110517-3051.html)
- [JS（jQuery）でidを付与して、0からはじまる連番をつけてみた 2018/09](http://creatornote.nakweb.com/js%EF%BC%88jquery%EF%BC%89%E3%81%A7id%E3%82%92%E4%BB%98%E4%B8%8E%E3%81%97%E3%81%A6%E3%80%810%E3%81%8B%E3%82%89%E3%81%AF%E3%81%98%E3%81%BE%E3%82%8B%E9%80%A3%E7%95%AA%E3%82%92%E3%81%A4%E3%81%91%E3%81%A6/)
- [jQueryのhref属性を取得する](https://codeday.me/jp/qa/20190219/259386.html)

## CDN - Google Host Place

https://developers.google.com/speed/libraries

## スクロール時 各メニューアクティブ表示化

### リファクタリング前

一応 機能していたが、
各セクション記事が増減した際、１ページ毎に編集が必要なコードであるため
リファクタリングを試行。

```js:jQuery
$(function(){
  // 各コンテンツ記事中心のトリガーポイントを取得
  var pagelink01_Amount = $('#pagelink01').offset().top - ($(window).height() / 2);
  var pagelink02_Amount = $('#pagelink02').offset().top - ($(window).height() / 2);
  var pagelink03_Amount = $('#pagelink03').offset().top - ($(window).height() / 2);
  var pagelink04_Amount = $('#pagelink04').offset().top - ($(window).height() / 2);
  var pagelink05_Amount = $('#pagelink05').offset().top - ($(window).height() / 2);
  var pagelink06_Amount = $('#pagelink06').offset().top - ($(window).height() / 2);

  // スクロール時
  $(window).scroll(function(){
    // リアルタイム スクロール位置取得
    var svrollAmount = $(this).scrollTop();
    
    if( svrollAmount >= pagelink01_Amount && svrollAmount < pagelink02_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink01']").addClass('active');
    }else if( svrollAmount >= pagelink02_Amount && svrollAmount < pagelink03_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink02']").addClass('active');
    }else if( svrollAmount >= pagelink03_Amount && svrollAmount < pagelink04_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink03']").addClass('active');    
    }else if( svrollAmount >= pagelink04_Amount && svrollAmount < pagelink05_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink04']").addClass('active');    
    }else if( svrollAmount >= pagelink05_Amount && svrollAmount < pagelink06_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink05']").addClass('active');    
    }else if( svrollAmount >= pagelink06_Amount ){
      $('.nav1__link.active').removeClass('active');
      $(".nav1__link[href='#pagelink06']").addClass('active');    
    }
  });
})
```

### リファクタリング後
```js:jQuery

```
<br><br>