_flash.scss

$flash-foreground: $background-color;

.flash{
  background: $background-color;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  font-size: 16px;
  font-weight: bold;
  left: 0;
  padding: $base-spacing 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: -200px;

  -webkit-animation: flashAnimation 5s ease;
  -o-animation: flashAnimation 5s ease;
  animation: flashAnimation 5s ease;

  &.flash--error{
    background: $error-color;
    color: $flash-foreground;
  }

  &.flash--notice{
    background: $info-color;
    color: $flash-foreground;
  }

  &.flash--success{
    background: $success-color;
    color: $flash-foreground;
  }
}

@-webkit-keyframes flashAnimation {
  0% { top: -200px; }
  20% {top: 0;}
  80% {top: 0;}
  100% { top: -200px; }
}
@-moz-keyframes flashAnimation {
  0% { top: -200px; }
  20% {top: 0;}
  80% {top: 0;}
  100% { top: -200px; }
}
@-ms-keyframes flashAnimation {
  0% { top: -200px; }
  20% {top: 0;}
  80% {top: 0;}
  100% { top: -200px; }
}
@-o-keyframes flashAnimation {
  0% { top: -200px; }
  20% {top: 0;}
  80% {top: 0;}
  100% { top: -200px; }
}
@keyframes flashAnimation {
  0% { top: -200px; }
  20% {top: 0;}
  80% {top: 0;}
  100% { top: -200px; }
}

header.html.haml

  - flash.each do |name, msg|
    %p{class: "flash flash--#{name}"}= msg