KatieK2

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

=coloured-flyout($color)
  border: solid tint($color, 10%) 1px
  background-color: tint($color, 20%)
    
.flyout

KatieK2

<ul class="theme theme--crisp">
  <li>#313340</li>
  <li>#f0f0e3</li>
  <li>#f9c27b</li>
  <li>#ef8531</li>
  <li>#f36519</li>
</ul>

<ul class="theme theme--funky">
  <li>#da0054</li>

KatieK2

<table>
  <tr>
    <td class="hulk1">70% highlight</td>
    <td class="hulk2">50% highlight</td>
    <td class="hulk3">30% highlight</td>
    <td class="hulk4">$hulk</td>
    <td class="hulk5">30% shadow</td>
    <td class="hulk6">50% shadow</td>
    <td class="hulk7">70% shadow</td>
  </tr>

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

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

KatieK2

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

@import "compass";

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

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>