Examples for Presentation: Advanced Responsive Web Design Part 2: Compass Basics

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 2: Compass Basics
 * For More Information: http://github.com/tsmith512/arwd
 */

// SCSS:
@import "compass";

.modal {
  @include box-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.overlay {
  @include opacity(0.5);
}

#{headings(1,3)} {
  text-transform: uppercase;
}

#{nest('header, footer', 'ul, ol')} {
  font-size: 0.75em;
}

SassMeister-output.css

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 2: Compass Basics
 * For More Information: http://github.com/tsmith512/arwd
 */
.modal {
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.overlay {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

h1, h2, h3 {
  text-transform: uppercase;
}

header ul, header ol, footer ul, footer ol {
  font-size: 0.75em;
}