Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.18)
// ----

$friendly-colour: #A0EF90;
$mine-spacing: 1px;
$base-mine: #EEE;
$bomb-colour: #222;
$mark-colour: lightblue;
$visible-colour: #efe;
$basic-gradient: webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(250,247,250,1)));



@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}


@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}


#status {
    background: $friendly-colour
}
#container div {
background: $basic-gradient;

    background-color: $base-mine;
    display: block;
    float: left;
    width: 35px;
}
#container div {
    background: none repeat scroll 0 0 #EEEEEE;
    @include border-radius(4px);
    margin: $mine-spacing;
    text-align: center;
    @include transition(background-color, 0.25s, ease-in-out);
}
#container div:hover {
    background-color: darken($base-mine, 25%);

}
#container div.bomb {
    background: darken($base-mine,80%);
}
#container {
    max-width: 100%;
    min-width: 960px;
}
.edge {
    clear: left;
}

.small { width: 60px; }

#container div.bomb {
  background-color: $bomb-colour;
  
}

#container div.marked {
  background-color: $mark-colour;
}

#container div.visible {
  background-color: $visible-colour;
}

SassMeister-output.css

#status {
  background: #a0ef90;
}

#container div {
  background: webkit-gradient(left top, left bottom, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #faf7fa));
  background-color: #eeeeee;
  display: block;
  float: left;
  width: 35px;
}

#container div {
  background: none repeat scroll 0 0 #EEEEEE;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin: 1px;
  text-align: center;
  -webkit-transition: background-color 0.25s ease-in-out;
  -moz-transition: background-color 0.25s ease-in-out;
  -ms-transition: background-color 0.25s ease-in-out;
  -o-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
}

#container div:hover {
  background-color: #aeaeae;
}

#container div.bomb {
  background: #222222;
}

#container {
  max-width: 100%;
  min-width: 960px;
}

.edge {
  clear: left;
}

.small {
  width: 60px;
}

#container div.bomb {
  background-color: #222222;
}

#container div.marked {
  background-color: lightblue;
}

#container div.visible {
  background-color: #eeffee;
}