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

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

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

Nobuyoshi

November 14, 2021
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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




         。。。


    7

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide