main.scss

$grid-row-cells: 4;
$grid-spacing: 10px;
$tile-size: (
    290px - $grid-spacing*($grid-row-cells+1))/$grid-row-cells;
$tile-border-radius: 3px;

//关键帧，pop：动画名称
@keyframes pop {
    0% {
        transform: scale(0
        );
}

50% {
    transform: scale(1.2);
}

100% {
    transform: scale(1);
}
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

main {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 290px;
    height: 290px;
    position: relative;
    padding: $grid-spacing;
    background: #bbada0;
    border-radius: 8px;

    .game-grid {
        .grid-row {
            margin-bottom: $grid-spacing;
            display: flex;

            .grid-cell {
                width: $tile-size;
                height: $tile-size;
                margin-right: $grid-spacing;
                float: left;
                border-radius: 3px;
                background: rgba(238, 228, 218, 0.35);

                &:last-child {
                    margin-right: 0;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .tile-container {
        position: absolute;
        left: 0;
        top: 0;

        .tile {
            position: absolute;
            width: $tile-size;
            height: $tile-size;
            border-radius: $tile-border-radius;
            display: block;
            transition: transform 6s ease-in-out;

            .tile-inner {
                width: 100%;
                height: 100%;
                line-height: $tile-size;
                background: #eee4da;
                text-align: center;
                font-weight: bold;
                font-size: 34px;
                color: #776e65;
            }
        }

        @for $x from 1 through $grid-row-cells {
            @for $y from 1 through $grid-row-cells {
                .tile-position-#{$x}-#{$y} {
                    $xPos: $grid-spacing+floor(($tile-size+$grid-spacing)*(($y)-1));
                    $yPos: $grid-spacing+floor(($tile-size+$grid-spacing)*(($x)-1));
                    transform: translate($xPos, $yPos);
                }
            }
        }

        .tile-merged .tile-inner {
            z-index: 20;
            //animination：设置元素动画效果。放缩动画，默认值ease：以低速开始，然后加快，在结束前变快
            animation: pop 200ms ease 100ms;
            //当动画不播放时，backwords表示动画应用于目标时立即应用第一个关键帧定义的值，并在animination-delay期间保留此值
            animation-fill-mode: backwards;
        }

        .new-tile .tile-inner {
            animation: appear 200ms ease 100ms;
            animation-fill-mode: backwards;
        }

        .tile.tile-2 .tile-inner {
            background: #eee4da;
        }

        .tile.tile-4 .tile-inner {
            background: #ede0c8;
        }

        .tile.tile-8 .tile-inner {
            color: #f9f6f2;
            background: #f2b179;
        }

        .tile.tile-16 .tile-inner {
            color: #f9f6f2;
            background: #f59563;
        }

        .tile.tile-32 .tile-inner {
            color: #f9f6f2;
            background: #f67c5f;
        }

        .tile.tile-64 .tile-inner {
            color: #f9f6f2;
            background: #f65e3b;
        }

        .tile.tile-128 .tile-inner {
            color: #f9f6f2;
            background: #edcf72;
            font-size: 29px;
        }

        .tile.tile-256 .tile-inner {
            color: #f9f6f2;
            background: #edcc61;
            font-size: 29px;
        }

        .tile.tile-512 .tile-inner {
            color: #f9f6f2;
            background: #edc850;
            font-size: 29px;
        }

        .tile.tile-1024 .tile-inner {
            color: #f9f6f2;
            background: #edc53f;
            font-size: 25px;
        }

        .tile.tile-2048 .tile-inner {
            color: #f9f6f2;
            background: #edc22e;
            font-size: 25px;
        }

    }

}