Edit on
//- twelve binary letters
- var groups = 12, g = 0;
//- hello world default checks
- var checks = [[0,1,0,0,1,0,0,0],[0,1,1,0,0,1,0,1],[0,1,1,0,1,1,0,0],[0,1,1,0,1,1,0,0],[0,1,1,0,1,1,1,1],[0,0,1,0,0,0,0,0],[0,1,0,1,0,1,1,1],[0,1,1,0,1,1,1,1],[0,1,1,1,0,0,1,0],[0,1,1,0,1,1,0,0],[0,1,1,0,0,1,0,0],[0,0,1,0,0,0,0,1]]
while g < groups
  - var x = 0
  while x < 8
    if g < checks.length && checks[g][x] == 1
      input(type="checkbox" id=('in-' + (g + 1) + '-' + (x + 1)) checked)
    else      
      input(type="checkbox" id=('in-' + (g + 1) + '-' + (x + 1)))
    - x++
  br
  - g++
  
section
  - g = 0
  h1
    while g < groups
      span(class=('output-' + (g + 1)))
      - g++
      
nav
  - g = 0
  while g < groups
    - var x = 0
    div
      while x < 8
        label(for=('in-' + (g + 1) + '-' + (x + 1)))
        - x++
      - g++

.map
  div
    span="a"
    span="01100001"
  div
    span="b"
    span="01100010"
  div
    span="c"
    span="01100011"
  div
    span="d"
    span="01100100"
  div
    span="e"
    span="01100101"
  div
    span="f"
    span="01100110"
  div
    span="g"
    span="01100111"
  div
    span="h"
    span="01101000"
  div
    span="i"
    span="01101001"
  div
    span="j"
    span="01101010"
  div
    span="k"
    span="01101011"
  div
    span="l"
    span="01101100"
  div
    span="m"
    span="01101101"
  div
    span="n"
    span="01101110"
  div
    span="o"
    span="01101111"
  div
    span="p"
    span="01110000"
  div
    span="q"
    span="01110001"
  div
    span="r"
    span="01110010"
  div
    span="s"
    span="01110011"
  div
    span="t"
    span="01110100"
  div
    span="u"
    span="01110101"
  div
    span="v"
    span="01110110"
  div
    span="w"
    span="01110111"
  div
    span="x"
    span="01111000"
  div
    span="y"
    span="01111001"
  div
    span="z"
    span="01111010"
  div
    span="A"
    span="01000001"
  div
    span="B"
    span="01000010"
  div
    span="C"
    span="01000011"
  div
    span="D"
    span="01000100"
  div
    span="E"
    span="01000101"
  div
    span="F"
    span="01000110"
  div
    span="G"
    span="01000111"
  div
    span="H"
    span="01001000"
  div
    span="I"
    span="01001001"
  div
    span="J"
    span="01001010"
  div
    span="K"
    span="01001011"
  div
    span="L"
    span="01001100"
  div
    span="M"
    span="01001101"
  div
    span="N"
    span="01001110"
  div
    span="O"
    span="01001111"
  div
    span="P"
    span="01010000"
  div
    span="Q"
    span="01010001"
  div
    span="R"
    span="01010010"
  div
    span="S"
    span="01010011"
  div
    span="T"
    span="01010100"
  div
    span="U"
    span="01010101"
  div
    span="V"
    span="01010110"
  div
    span="W"
    span="01010111"
  div
    span="X"
    span="01011000"
  div
    span="Y"
    span="01011001"
  div
    span="Z"
    span="01011010"
  div
    span="0"
    span="00110000"
  div
    span="1"
    span="00110001"
  div
    span="2"
    span="00110010"
  div
    span="3"
    span="00110011"
  div
    span="4"
    span="00110100"
  div
    span="5"
    span="00110101"
  div
    span="6"
    span="00110110"
  div
    span="7"
    span="00110111"
  div
    span="8"
    span="00111000"
  div
    span="9"
    span="00111001"
  div
    span=" "
    span="00100000"    
  div
    span="!"
    span="00100001"
  div
    span="\""
    span="00100010"
  div
    span="#"
    span="00100011"
  div
    span="$"
    span="00100100"
  div
    span="%"
    span="00100101"
  div
    span="&"
    span="00100110"
  div
    span="'"
    span="00100111"
  div
    span="("
    span="00101000"
  div
    span=")"
    span="00101001"
  div
    span="*"
    span="00101010"
  div
    span="+"
    span="00101011"
  div
    span=","
    span="00101100"
  div
    span="-"
    span="00101101"
  div
    span="."
    span="00101110"
  div
    span="/"
    span="00101111"
  div
    span=":"
    span="00111010"
  div
    span=";"
    span="00111011"
  div
    span="<"
    span="00111100"
  div
    span="="
    span="00111101"
  div
    span=">"
    span="00111110"
  div
    span="?"
    span="00111111"
  div
    span="@"
    span="01000000"
  div
    span="["
    span="01011011"
  div
    span="\\"
    span="01011100"
  div
    span="]"
    span="01011101"
  div
    span="^"
    span="01011110"
  div
    span="_"
    span="01011111"
  div
    span="`"
    span="01100000"
  div
    span="{"
    span="01111011"
  div
    span="|"
    span="01111100"
  div
    span="}"
    span="01111101"
  div
    span="~"
    span="01111110"
View Compiled
// how many binary groups
$seq-count: 12;
// binary sequence and corresponding letter
$map:
  (seq: (0,0,1,0,0,0,0,1), char: "!"),
  (seq: (0,0,1,0,0,0,1,0), char: "\""),
  (seq: (0,0,1,0,0,0,1,1), char: "#"),
  (seq: (0,0,1,0,0,1,0,0), char: "$"),
  (seq: (0,0,1,0,0,1,0,1), char: "%"),
  (seq: (0,0,1,0,0,1,1,0), char: "&"),
  (seq: (0,0,1,0,0,1,1,1), char: "'"),
  (seq: (0,0,1,0,1,0,0,0), char: "("),
  (seq: (0,0,1,0,1,0,0,1), char: ")"),
  (seq: (0,0,1,0,1,0,1,0), char: "*"),
  (seq: (0,0,1,0,1,0,1,1), char: "+"),
  (seq: (0,0,1,0,1,1,0,0), char: ","),
  (seq: (0,0,1,0,1,1,0,1), char: "-"),
  (seq: (0,0,1,0,1,1,1,0), char: "."),
  (seq: (0,0,1,0,1,1,1,1), char: "/"),
  (seq: (0,0,1,1,0,0,0,0), char: "0"),
  (seq: (0,0,1,1,0,0,0,1), char: "1"),
  (seq: (0,0,1,1,0,0,1,0), char: "2"),
  (seq: (0,0,1,1,0,0,1,1), char: "3"),
  (seq: (0,0,1,1,0,1,0,0), char: "4"),
  (seq: (0,0,1,1,0,1,0,1), char: "5"),
  (seq: (0,0,1,1,0,1,1,0), char: "6"),
  (seq: (0,0,1,1,0,1,1,1), char: "7"),
  (seq: (0,0,1,1,1,0,0,0), char: "8"),
  (seq: (0,0,1,1,1,0,0,1), char: "9"),
  (seq: (0,0,1,1,1,0,1,0), char: ":"),
  (seq: (0,0,1,1,1,0,1,1), char: ";"),
  (seq: (0,0,1,1,1,1,0,0), char: "<"),
  (seq: (0,0,1,1,1,1,0,1), char: "="),
  (seq: (0,0,1,1,1,1,1,0), char: ">"),
  (seq: (0,0,1,1,1,1,1,1), char: "?"),
  (seq: (0,1,0,0,0,0,0,0), char: "@"),
  (seq: (0,1,0,1,1,0,1,1), char: "["),
  (seq: (0,1,0,1,1,1,0,0), char: "\\"),
  (seq: (0,1,0,1,1,1,0,1), char: "]"),
  (seq: (0,1,0,1,1,1,1,0), char: "^"),
  (seq: (0,1,0,1,1,1,1,1), char: "_"),
  (seq: (0,1,1,0,0,0,0,0), char: "`"),
  (seq: (0,1,1,1,1,0,1,1), char: "{"),
  (seq: (0,1,1,1,1,1,0,0), char: "|"),
  (seq: (0,1,1,1,1,1,0,1), char: "}"),
  (seq: (0,1,1,1,1,1,1,0), char: "~"),
  (seq: (0,0,1,0,0,0,0,0), char: "\00a0"),
  (seq: (0,1,1,0,0,0,0,1), char: "a"),
  (seq: (0,1,1,0,0,0,1,0), char: "b"),
  (seq: (0,1,1,0,0,0,1,1), char: "c"),
  (seq: (0,1,1,0,0,1,0,0), char: "d"),
  (seq: (0,1,1,0,0,1,0,1), char: "e"),
  (seq: (0,1,1,0,0,1,1,0), char: "f"),
  (seq: (0,1,1,0,0,1,1,1), char: "g"),
  (seq: (0,1,1,0,1,0,0,0), char: "h"),
  (seq: (0,1,1,0,1,0,0,1), char: "i"),
  (seq: (0,1,1,0,1,0,1,0), char: "j"),
  (seq: (0,1,1,0,1,0,1,1), char: "k"),
  (seq: (0,1,1,0,1,1,0,0), char: "l"),
  (seq: (0,1,1,0,1,1,0,1), char: "m"),
  (seq: (0,1,1,0,1,1,1,0), char: "n"),
  (seq: (0,1,1,0,1,1,1,1), char: "o"),
  (seq: (0,1,1,1,0,0,0,0), char: "p"),
  (seq: (0,1,1,1,0,0,0,1), char: "q"),
  (seq: (0,1,1,1,0,0,1,0), char: "r"),
  (seq: (0,1,1,1,0,0,1,1), char: "s"),
  (seq: (0,1,1,1,0,1,0,0), char: "t"),
  (seq: (0,1,1,1,0,1,0,1), char: "u"),
  (seq: (0,1,1,1,0,1,1,0), char: "v"),
  (seq: (0,1,1,1,0,1,1,1), char: "w"),
  (seq: (0,1,1,1,1,0,0,0), char: "x"),
  (seq: (0,1,1,1,1,0,0,1), char: "y"),
  (seq: (0,1,1,1,1,0,1,0), char: "z"),
  (seq: (0,1,0,0,0,0,0,1), char: "A"),
  (seq: (0,1,0,0,0,0,1,0), char: "B"),
  (seq: (0,1,0,0,0,0,1,1), char: "C"),
  (seq: (0,1,0,0,0,1,0,0), char: "D"),
  (seq: (0,1,0,0,0,1,0,1), char: "E"),
  (seq: (0,1,0,0,0,1,1,0), char: "F"),
  (seq: (0,1,0,0,0,1,1,1), char: "G"),
  (seq: (0,1,0,0,1,0,0,0), char: "H"),
  (seq: (0,1,0,0,1,0,0,1), char: "I"),
  (seq: (0,1,0,0,1,0,1,0), char: "J"),
  (seq: (0,1,0,0,1,0,1,1), char: "K"),
  (seq: (0,1,0,0,1,1,0,0), char: "L"),
  (seq: (0,1,0,0,1,1,0,1), char: "M"),
  (seq: (0,1,0,0,1,1,1,0), char: "N"),
  (seq: (0,1,0,0,1,1,1,1), char: "O"),
  (seq: (0,1,0,1,0,0,0,0), char: "P"),
  (seq: (0,1,0,1,0,0,0,1), char: "Q"),
  (seq: (0,1,0,1,0,0,1,0), char: "R"),
  (seq: (0,1,0,1,0,0,1,1), char: "S"),
  (seq: (0,1,0,1,0,1,0,0), char: "T"),
  (seq: (0,1,0,1,0,1,0,1), char: "U"),
  (seq: (0,1,0,1,0,1,1,0), char: "V"),
  (seq: (0,1,0,1,0,1,1,1), char: "W"),
  (seq: (0,1,0,1,1,0,0,0), char: "X"),
  (seq: (0,1,0,1,1,0,0,1), char: "Y"),
  (seq: (0,1,0,1,1,0,1,0), char: "Z");
// binary sequence length
$seq-length: 8;

// create a selector
@function selector($s, $i, $v) {
  @if $v == 0 {
    @return "#in-#{$s}-#{$i}:not(:checked)";
  } @else {
    @return "#in-#{$s}-#{$i}:checked";
  }
}

// for each letter
@each $item in $map {
  // binary sequence for the letter
  $seq: map-get($item, seq);
  // generate the main text selector  
  $sel-text: "";
  // generate the nav text selector  
  $sel-nav: "";
  // for each group
  @for $g from 1 through $seq-count {
    // for each binary value
    @for $i from 1 through $seq-length {
      // get the value      
      $val: nth($seq, $i);
      // get the selector
      $sel: selector($g, $i, $val);
      $sel-text: $sel-text + $sel;
      $sel-nav: $sel-nav + $sel;
      // if last, sibling combinator
      @if $i != $seq-length {
        $sel-text: $sel-text + " ~ ";
        $sel-nav: $sel-nav + " ~ ";
      }
    }
    // add output to selector
    $sel-text: $sel-text + " ~ section .output-#{$g}:after";
    $sel-nav: $sel-nav + " ~ nav div:nth-child(#{$g}):after";
    // if not the last group, add comma
    @if $g != $seq-count {
      $sel-text: $sel-text + ", ";
      $sel-nav: $sel-nav + ", ";
    }
  }
  
  // add output content
  #{$sel-text} {
    content: "#{map-get($item, char)}";
  }
  // add nav content
  #{$sel-nav} {
    content: "“#{map-get($item, char)}”";
    // frustrating that this is req'd, 
    // but i need "nil" to look smaller than a binary value
    font-size: 1em;
  }
}

// binary sequence length
$sel-label: "";
// for each binary sequence
@for $s from 1 through $seq-count {
  // for each binary value
  @for $i from 1 through $seq-length {
    // style label
    $sel-label: $sel-label + "#in-#{$s}-#{$i}:checked ~ nav [for='in-#{$s}-#{$i}']";
    // if not the last binary value, add comma
    @if $i != $seq-length {
      $sel-label: $sel-label + ", ";
    }
  }
  // if not the last group, add comma
  @if $s != $seq-count {
    $sel-label: $sel-label + ", ";
  }
}

$px: 16px;
$per-row: 3;
$label-h: 3 * $px;
$label-w: 1.5 * $px;
$label-gutter: 0.4 * $px;
$label-time: 100ms;
$label-ease: ease-in-out;
$c-on: #D0D102;
$c-on: #FFCC00;
$c-off: #555;
$c-label: #00A1CB;
$c-dark: #616161;
$c-dark: #313131;
$c-light: #FFFDF7;

// styling active label
#{$sel-label} {
  background: lighten($c-on, 30%);
  &::after { 
    top: $label-h / 2 + $label-gutter / 2;
    background: $c-on;
    box-shadow: inset 0px 0px 0px 2px darken($c-on, 5%);
  }
}

// body style
body {
  background-color: $c-dark;
  color: $c-light;
  text-align: center;
  padding-top: 2rem;
  overflow-x: hidden;
}

input {
  opacity: 0.5;
  transform: scale(0.9);
  // margin every 8
  &:nth-of-type(8n) { margin-right: 0.5rem; }
  // but not at end of row  
  &:nth-of-type(24n) { margin-right: 0; }
}

// inline-block every 1,2 br
br { 
  display: none;
  &:nth-of-type(3n) { display: block; }
}

@import url(https://fonts.googleapis.com/css?family=Roboto:900italic);
$shad: 1px;

// styling the output
section {
  text-align: center;
  h1 {
    font-size: 4rem;
    font-family: Roboto, sans-serif;
    font-style: italic;
    color: $c-on;
    letter-spacing: 0.025em;
    span {
      text-shadow: -2px -1px 0px lighten($c-on, 30%),
        4px 4px 0px lighten($c-dark, 10%);
    }
  }
}

// styling the labels
$div-w: $label-w * $seq-length + ($label-gutter * ($seq-length - 1));
$div-gutter: 1.2 * $px;
nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  width: $div-w * $per-row + ($div-gutter * $per-row - 1);
  div {
    width: $div-w;
    position: relative;
    display: flex;
    margin-bottom: 2.5 * $px + $div-gutter;
    margin-left: $div-gutter;
    &:hover:after { color: lighten($c-dark, 50%) }
    &:nth-child(#{$per-row}n+1) { margin-left: 0; }
    &::after {
      content: "nil";
      font-size: 0.7em;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      display: block;
      line-height: 2 * $px;
      box-sizing: border-box;
      font-family: Menlo, Andale Mono, monspace;
      padding:  0.5 * $px 0.5rem;
      text-align: center;
      transition: color $label-time $label-ease;
      color: lighten($c-dark, 10%);
    }
    label {
      background: lighten($c-dark, 10%);
      display: block;
      height: $label-h;
      width: $label-w;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      box-shadow: 
        //inset 0px 0px 0px 1px lighten($c-dark, 20%),
        0px 0px 0px 1px lighten($c-dark, 10%);
      transition: background $label-time $label-ease;
      + label { margin-left: $label-gutter; }
      &::after {
        content: "";
        display: block;
        position: absolute;
        height: $label-h / 2 - $label-gutter;
        width: calc(100% - #{$label-gutter});
        left: $label-gutter / 2;
        top: $label-gutter / 2;
        border-radius: 4px;
        background: $c-off;
        box-shadow: inset 0px 0px 0px 2px darken($c-off, 5%);
        transition: top $label-time $label-ease,
          box-shadow $label-time $label-ease,
          background $label-time $label-ease;
        
      }
    }
  }
}

// styling the map
.map {
  position: fixed;
  top: 0; right: -100px; bottom: 0;
  overflow: auto;
  width: 140px;
  font-size: 0.8em;
  background: $c-dark;
  border: 2px solid lighten($c-dark, 5%);
  font-family: Menlo, Andale Mono, monspace;
  box-sizing: border-box;
  transition: right 200ms ease-in-out;  
  &:hover { right: 0; }
  div {
    display: flex;
    padding: 0.5rem 0.25rem;
    &:nth-child(odd) {
      background: lighten($c-dark, 5%);
    }
    span {
      &:nth-child(odd) { 
        flex: 1; 
        color: $c-on;
      }
      &:nth-child(even) { 
        flex: 3; 
        color: lighten($c-on, 30%);
      }
      text-align: center;
    }
  }
}
View Compiled
Rerun