KatieK2

<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

  <header id="masthead" class="site-header" role="banner">
    Masthead<br />
    Am et dictum<br />
    enim nec<br />
    mollis nisl<br />
  </header><!-- #masthead -->

KatieK2

// ----
// libsass (v3.0.1)
// ----

$pink: #C6538C;

.l-pink {
  color: lighten($pink, 20%);
}

KatieK2

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$pink: #C6538C;

.l-pink {
  color: lighten($pink, 20%);
}

KatieK2

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

@import "compass";

$color: #C6538C;

.box {

KatieK2

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "./"
sass_dir = "./sass"
images_dir = "../images/site-styles"
javascripts_dir = "../js"

# You can select your preferred output style here (can be overridden via the command line):

KatieK2

// ----
// libsass (v2.0.0)
// ----

@mixin border($direction,$size,$colour) {
  border-#{$direction}: $size solid $colour;
}

h2 {
  @include border("top", "2px", "red");

KatieK2

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$color: oseli;//red 

@debug the color is $color;
@debug the color is type-of($color);

KatieK2

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

@import "compass";

h1 {
  @include transition-property(width);
  @include transition-duration(.2s);

KatieK2

<p>
  With Sass 3.3.3 (Maptastic Maple) and 
  Compass 0.12.3 (Alnilam), maps compile to errors:
</p>
<code> error demo/sass/screen.scss (Line 5: Invalid CSS after "$map: (key1": expected ")", was ": white, key2: ...")</code>

KatieK2

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

$text-dark: #492a35;
$text-light: #bdc1ad;
$border-light: #bdc1ad;
$rgba-lighten: rgba(255, 255, 255, 0.4);
$rgba-darken: rgba(0, 0, 0, 0.65);