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

Transcript

1. Pug / SASS でピクロス(カービィ)を作成 フロントエンドエンジニア：うえむー
2. １ 自己紹介 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!