h1 CSS Game of Life 
h2 (single generation)
p Select boxes to create a pattern then press RUN to see the next generation. 
    //define checkbox and its neighbours
input(type="checkbox" id="go")
div(class="game")
  - var i=1
  while i <= 20
    - var j=1
    while j<=20
      input(type="checkbox" id="check"+i+"-"+j 
        class= "n"+(i-1)+"-"+(j-1)+" "
              +"n"+(i-1)+"-"+(j  )+" "
              +"n"+(i-1)+"-"+(j+1)+" "
              +"n"+(i  )+"-"+(j-1)+" "
              +"n"+(i  )+"-"+(j+1)+" "
              +"n"+(i+1)+"-"+(j-1)+" "
              +"n"+(i+1)+"-"+(j  )+" "
              +"n"+(i+1)+"-"+(j+1)+" "
         checked=([64,65,66,67,73,74,75,76,85,86,95,94, 130,150,170,190, 205,215,224,236,243,257,245,255,266,274,287,293, 308,312,329,330,331].indexOf(20*(i-1)+j) >= 0)
        ) 
      - j++
    - i++

  table(id="go")
    - var i=1
    while i <= 20
      tr(id="row"+i)
        - var j=1
        while j<=20
          td
            label(for="check"+i+"-"+j)
          - j++
      - i++
label(for="go") 
  
  
View Compiled
$alive: royalblue;
$dead: beige;

body {
  max-width: 40em;
  margin:0 auto;
}
a {
  display:block;
  padding:1em;
}
table { 
  border-collapse: collapse;
  border: solid thick darkgreen;
  margin: 1em auto;
}
td {
  border: solid thin;
  position: relative;
  overflow: hidden;
  padding: 0;
}
td label{
  display:block;
  height: 1em; 
  width: 1em; 
  background: $dead;
}
input {
  position: absolute;
  left:-100%;
}
@for $i from 1 through 20 {
  @for $j from 1 through 20 {
    input:nth-of-type( #{($i - 1) * 20 + $j} ):checked ~ 
      table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
      background: $alive;
    }
  }
}  
input#go ~ label[for="go"]  {
  display: block;
  font: 200% bold;
  text-align: center;
  padding: 0.5em;
  width: 6em;
  margin: 0.5em auto;
  
  background: #cce;
  border: darkgray;
  border-radius: 0.5em; 
}
input#go ~ label[for="go"]::before {
  content: "RUN";
  color: darkgreen;
}
input#go:checked ~ label[for="go"]::before {
  content: "RESET";
  color: red;
}
input#go:checked + div.game {
  & table {
    border: red thick solid;
  }
  & label {
    transition: background 1s;
    background: $dead;
    pointer-events: none;
  }
  
  @for $i from 1 through 20 {
    @for $j from 1 through 20 {
      /* rule if previously alive, needs 2 neighbours */
      & input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
      input:nth-of-type( #{($i - 1) * 20 + $j} ):checked ~ 
        table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
        background: $alive;
      }
      /* but neighbours could be after in the list */
      & input.n#{($i)}-#{$j}:checked ~ 
      input:nth-of-type( #{($i - 1) * 20 + $j} ):checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
        table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
        background: $alive;
      }    
      & input:nth-of-type( #{($i - 1) * 20 + $j} ):checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
        table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
        background: $alive;
      }
      /* if previously dead, needs exactly 3 neighbours */ 
      & input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
        table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
        background: $alive;
      }
      /* if 4 or more neighbours, dies of overcrowding */ 
      & input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
      input.n#{($i)}-#{$j}:checked ~ 
        table tr:nth-of-type(#{$i}) td:nth-of-type(#{$j}) label{
        background: $dead;
      }
    }
  } 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.