roytomeij

<ul class="rating">
  <li class="star-1"><a href="#1">1 star</a></li>
  <li class="star-2"><a href="#2">2 stars</a></li>
  <li class="star-3"><a href="#3">3 stars</a></li>
  <li class="star-4"><a href="#4">4 stars</a></li>
  <li class="star-5"><a href="#5">5 stars</a></li>
</ul>

<ul class="rating2">
  <li class="star-1"><a href="#1">1 star</a></li>

roytomeij

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

$used-fonts: ();

@mixin import-google-fonts() {
  $fonts: "";

roytomeij

(
  "Open Sans": 400 700 600italic,
  "PT Serif": 700
)

roytomeij

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

$used-fonts: ();

@mixin track-fonts($family, $weight, $style) {
  // First check if we already knew this one:
  @if map-has-key($used-fonts, $family) == false {

roytomeij

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

@mixin font($family, $weight: 400, $style: normal) {
  font-family: $family;
  font-weight: $weight;
  font-style: $style;
}

roytomeij

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

@function base64-encode($filename) {
  // Instead of this mock output, this would
  // wrap some third-party tool in real life.
  // Eg for Compass: `inline-image($filename)`
  @return "url(data:image/png;base64,R0lGODlhEAAQAMQA...)";

roytomeij

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

$placeholder-name: 'foo';

%#{$placeholder-name} {
  background: red;
}

roytomeij

<div class="swatch-0"></div>
<div class="swatch-1"></div>
<div class="swatch-2"></div>
<div class="swatch-3"></div>
<div class="swatch-4"></div>
<div class="swatch-5"></div>
<div class="swatch-6"></div>
<div class="swatch-7"></div>
<div class="swatch-8"></div>
<div class="swatch-9"></div>

roytomeij

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

@mixin some-mixin($margin: 10px, $border: null) {
  width: 100%;
  margin: $margin;
  border: $border;
}

roytomeij

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

@mixin border-radius($radius: 10px, $vertical-radius: 10px) {
  border-radius: #{$radius} / #{$vertical-radius};
}

.foo {