KatieK2

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

$red: red;
$FF0000: #FF0000;
$fuchsia: fuchsia;
$f0f: #f0f;

KatieK2

Sass mixin using if/else default arguments, and variable interpolation

Sass mixin uses arguments, if/else, and variable interpolation to update mixin with dynamic background image.

A Pen by KatieK on CodePen.

License.

KatieK2

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----

@mixin quotenote($bgimage: none) { 

  width: 80%; 
  background-color: #333; 
  padding: 1%; 

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

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

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

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

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

<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.10)
// Compass (v1.0.0.alpha.20)
// ----

@import "compass";

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