Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="o-list-fit  c-nav-primary">
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">The workshop</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">2013 Schedule</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link  is-current">About CSS Wizardry</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">Contact</a>
  </li>
</ul>

SassMeister-input.scss

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

// _objects.list-fit.scss
/**
 * A simple object to cause lists to fit into all
 * available horizontal space. Extend in Components layer.
 *
 * 1. Cause list to take up all available space.
 * 2. Use `table` to make children pack up side-by-side.
 * 3. Use `fixed` to ensure that all children occupy an equal width.
 */
.o-list-fit {
  margin:  0;
  padding: 0;
  list-style: none;
  width: 100%; /* [1] */
  display: table; /* [2] */
  table-layout: fixed; /* [3] */
}

  /**
   * Cause each item to fit into packed structure.
   */
  .o-list-fit__item {
    display: table-cell;
  }

  .o-list-fit__link {
    display: block;
  }

// Tell the project that `list-fit` has been loaded.
$has-list-fit: true;





// _components.nav-primary.scss
// This component depends on `.o-list-fit`. Check if it’s loaded.

@if (variable-exists(has-list-fit)) {
} @else {
  @warn "Oops! It looks like you haven’t included the `.o-list-fit` object.";
}

/**
 * Site’s primary nav. Extends `.o-list-fit`.
 *
 * 1. Crop gradient’s overflow beyond round corners.
 */
.c-nav-primary {
  font: 0.75rem/1.5 sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden; /* [1] */
}

  .c-nav-primary__item {}

    /**
     * Each link inside the nav has a large hit area.
     *
     * 1. Set up an invisible, 1px, gray border.
     * 2. Enable the border on the sides of the links.
     * 3. Override its gray color on the left side of the links.
     */
    .c-nav-primary__link {
      color: #333;
      padding: 10px;
      text-decoration: none;
      border: 0 dashed #ccc; /* [1] */
      border-width: 0 1px; /* [2] */
      border-left-color: #fff; /* [3] */
      
      background-color: rgb(255,255,255);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(238,238,238,1)));
      background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
      background-image: -moz-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
      background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
      background-image: linear-gradient(rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);

      &.is-current {
        text-decoration: underline;
      }

      /**
       * Remove redundant border from the left of the first link.
       */
      .c-nav-primary__item:first-child > & {
        border-left: none;
      }

      /**
       * Remove redundant border from the right of the last link.
       */
      .c-nav-primary__item:last-child > & {
        border-right: none;
      }

    }

SassMeister-output.css

@charset "UTF-8";
/**
 * A simple object to cause lists to fit into all
 * available horizontal space. Extend in Components layer.
 *
 * 1. Cause list to take up all available space.
 * 2. Use `table` to make children pack up side-by-side.
 * 3. Use `fixed` to ensure that all children occupy an equal width.
 */
.o-list-fit {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  /* [1] */
  display: table;
  /* [2] */
  table-layout: fixed;
  /* [3] */
}

/**
 * Cause each item to fit into packed structure.
 */
.o-list-fit__item {
  display: table-cell;
}

.o-list-fit__link {
  display: block;
}

/**
 * Site’s primary nav. Extends `.o-list-fit`.
 *
 * 1. Crop gradient’s overflow beyond round corners.
 */
.c-nav-primary {
  font: 0.75rem/1.5 sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  /* [1] */
}

/**
 * Each link inside the nav has a large hit area.
 *
 * 1. Set up an invisible, 1px, gray border.
 * 2. Enable the border on the sides of the links.
 * 3. Override its gray color on the left side of the links.
 */
.c-nav-primary__link {
  color: #333;
  padding: 10px;
  text-decoration: none;
  border: 0 dashed #ccc;
  /* [1] */
  border-width: 0 1px;
  /* [2] */
  border-left-color: #fff;
  /* [3] */
  background-color: white;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(#eeeeee));
  background-image: -webkit-linear-gradient(white 0%, #eeeeee 100%);
  background-image: -moz-linear-gradient(white 0%, #eeeeee 100%);
  background-image: -o-linear-gradient(white 0%, #eeeeee 100%);
  background-image: linear-gradient(white 0%, #eeeeee 100%);
  /**
   * Remove redundant border from the left of the first link.
   */
  /**
   * Remove redundant border from the right of the last link.
   */
}
.c-nav-primary__link.is-current {
  text-decoration: underline;
}
.c-nav-primary__item:first-child > .c-nav-primary__link {
  border-left: none;
}
.c-nav-primary__item:last-child > .c-nav-primary__link {
  border-right: none;
}

SassMeister-rendered.html

<ul class="o-list-fit  c-nav-primary">
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">The workshop</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">2013 Schedule</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link  is-current">About CSS Wizardry</a>
  </li>
  <li class="o-list-fit__item  c-nav-primary__item">
    <a href="#" class="o-list-fit__link  c-nav-primary__link">Contact</a>
  </li>
</ul>