Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pug / SASS でピクロス(カービィ)を作成

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=47 Nobuyoshi
November 14, 2021

Pug / SASS でピクロス(カービィ)を作成

Pug / SASS でピクロス(カービィ)を作成をして、
html/pugとcss/scssのコード量の比較と、コード量を押さえられるscssの関数などを紹介していきます。

https://pug-scss-picross.vercel.app/dest/picross_2.html

https://codepen.io/uemuragame5683/pen/PomoWOa

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=128

Nobuyoshi

November 14, 2021
Tweet

Transcript

  1. Pug / SASS でピクロス(カービィ)を作成 フロントエンドエンジニア:うえむー

  2. 1 自己紹介 Name:うえむー  フロントエンドエンジニア Skill:html / css / scss /

    javascript / jQuery / vue.js / gulp.js / nuxt.js / next.js / micro cms /php etc... ※趣味でgo・firebaseを勉強中です。 Hobby:プログラミング学習・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter::https://twitter.com/uemuragame5683 ブログサイト:https://nu-blogsite.net/ ポートフォリオサイト:https://uemu-engineer.com/
  3. 2 目次 ・sass / pug とは? メリット・デメリット ・作品を公開 ・css /sass

    のコード量の比較 ・これを使えばコード量が押さえられる ・ピクロス作って苦労したこと ・まとめ
  4. 3 sass / pug とは? sass・・・CSSを効率よく書くためのテンプレートエンジン。 pug・・・HTMLを効率的に書くためのテンプレートエンジン。 メリット:コード量が押さえられる・変数が使える・効率よくかける・pugだと閉じタグいらない ・ファイルを分割管理できる デメリット:node.jsなどのインストール

    / 環境が必要
  5. 4 sass / pug とは? コード量を比較するため、グリッド数が多いピクロス(カービィ)を作成してみました。

  6. 5 作品を公開 https://codepen.io/uemuragame5683/pens/public

  7. 6 コード量の比較 •css /sass html/pugのコード量の比較 ・css 4854行 scss 181行 4670行に押さえられることに成功! ・html 1260行 pug

    213行 1043行に押さえられることに成功!
  8. これを使えばコード量が押さえられる pug while文 - var n = 1; while n

    <= 400 input( type="checkbox" id=`rogic-checkbox- ${n}` ) label( for=`rogic-checkbox- ${n++}` ) <input type="checkbox" id="rogic-checkbox-1" /> <label for="rogic-checkbox-1" ></label> <input type="checkbox" id="rogic-checkbox-2" /> <label for="rogic-checkbox-2" ></label>      。。。 <input type="checkbox" id="rogic-checkbox-400" /> <label for="rogic-checkbox-400" ></label> 7
  9. これを使えばコード量が押さえられる sass for文 $line-min: 1; $line-max: 441; @for $i from

    $line-min through $line-max { div.rogic-#{$i} { box-shadow: inset 1px 0 0 0 $black, inset 0 1px 0 0 $black; } } div.rogic-1 { box-shadow: inset 1px 0 0 0 #000000;, inset 0 1px 0 0 #000000;; } div.rogic-2 { box-shadow: inset 1px 0 0 0 #000000;, inset 0 1px 0 0 #000000;; } 。。。 div.rogic-441 { box-shadow: inset 1px 0 0 0 #000000;, inset 0 1px 0 0 #000000;; } 8
  10. これを使えばコード量が押さえられる sass each文 $row: 22, 43, 64, 85, 106, 127,

    148, 169, 190, 211, 232, 253, 274, 295, 316, 337, 358, 379, 400, 421; @each $rows in $row { div.rogic-#{$rows} { align-content: center; justify-content: flex-end; align-items: center; } } 。。。 div.rogic-22 { align-content: center; justify-content: flex-end; align-items: center; } div.rogic-43 { align-content: center; justify-content: flex-end; align-items: center; } 9
  11. 10 これを使えばコード量が押さえられる sass マップ(連想配列):$変数名: (key1: value1, key2: value2, key3: value3);

    $white: #ffffff; $lightgray: #dddddd; $gray: #cccccc; $row_white :115, 119; $row_black :94, 98, 136, 140, 157, 161; $row_darkgray :29, 30, 31, 32, 33,。。。 $bg_color: ($white: $row_white, $black: $row_black, $darkgray: $row_darkgray 。。。 ); @each $background , $classname in $bg_color { @each $rows in $classname { div.rogic-#{$rows} { background-color : $background ; } } }
  12. 11 sassでできないこと ・セレクタの指定  複数セレクタ指定の場合はfor文・each文・条件分岐の指定はできないので静的で記述 input[id="rogic-checkbox-1"]:not(:checked) ~ input[id="rogic-checkbox-2"]:not(:checked) ~ input[id="rogic-checkbox-3"]:not(:checked) ~

    input[id="rogic-checkbox-4"]:not(:checked) ~ input[id="rogic-checkbox-5"]:not(:checked) ~ input[id="rogic-checkbox-6"]:not(:checked) ~ input[id="rogic-checkbox-7"]:checked ~ input[id="rogic-checkbox-8"]:checked …省略 ~ input[id="rogic-checkbox-399"]:checked ~ input[id="rogic-checkbox-400"]:not(:checked) ~ .rogic-inner { transition: all .2s ease; box-shadow: inset 0 0 5px 2px $gray; div[class*='rogic-'] { transition: all .2s ease; z-index: 1; } @each $background, $classname in $bg_color { @each $rows in $classname { div.rogic-#{$rows} { background-color: $background; } } } }
  13. 12 まとめ ・グリッド数の多いサイト、ページを作る時はsass/pugはおすすめ ・for文、each文、条件分岐、マップなどを利用すれば行が押さえられる ・複数セレクタを指定はfor・if文は使えない

  14. 13 ご静聴ありがとうございました! THANK YOU!