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);

KatieK2

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

$bgcolor: #C6538C;
$text-color: black;
$alt-text: white;
$second-bg: #73264C;

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

<h1>Lorem Ipsum</h1>
<h2>Is super fabulous</h2>

KatieK2

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

@function genRandom($int) {
    $random: random(210);
    $random2: ($int * $random);
    @return $random2;
    @debug $random2;

KatieK2

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

@import "compass";

@mixin post-link ($class, $color, $hover) {
    a.#{$class}:link {
        color: $color;