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 でピクロス(カービィ)を作成
   フロントエンドエンジニア：うえむー
   

   View Slide

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/
   

   View Slide

3. 2
   目次
   ・sass / pug とは？ メリット・デメリット
   ・作品を公開
   ・css /sass のコード量の比較
   ・これを使えばコード量が押さえられる
   ・ピクロス作って苦労したこと
   ・まとめ
   

   View Slide

4. 3
   sass / pug とは？
   sass・・・CSSを効率よく書くためのテンプレートエンジン。
   pug・・・HTMLを効率的に書くためのテンプレートエンジン。
   メリット：コード量が押さえられる・変数が使える・効率よくかける・pugだと閉じタグいらない
   ・ファイルを分割管理できる
   デメリット：node.jsなどのインストール / 環境が必要
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. これを使えばコード量が押さえられる
   pug while文
   - var n = 1;
   while n <= 400
   input( type="checkbox" id=`rogic-checkbox- ${n}` )
   label( for=`rogic-checkbox- ${n++}` )
   
   
   
   
   　　　　　。。。
   
   
   7
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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 ;
    }
    }
    }
    

    View Slide

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;
    }
    }
    }
    }
    

    View Slide

13. 12
    まとめ
    ・グリッド数の多いサイト、ページを作る時はsass/pugはおすすめ
    ・for文、each文、条件分岐、マップなどを利用すれば行が押さえられる
    ・複数セレクタを指定はfor・if文は使えない
    

    View Slide

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

    View Slide