Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1 class="h2">Classes</h1>
<p><a href="http://codepen.io/vincent-valentin/pen/QwgZeg">Voir sur CodePen</a></p>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// SassyLists (v2.2.1)
// ----

$smash-lte-ie8: false;

$smash-rem:           not $smash-lte-ie8;
$smash-mq-responsive: not $smash-lte-ie8;

$smash-box-sizing: false;

$smash-gutter:               24px!default;
$smash-col:        $smash-gutter * 3!default;
$smash-cols:                   10!default;
$smash-external-gutters:    false!default;

$smash-debug: #0F0!default;

$smash-bfs:    16px!default;
$smash-fs0:    $smash-bfs!default;

$smash-ratios:(
    double-octave:    1/4,
    major-twelfth:    1/3,
    major-eleventh:   3/8,
    major-tenth:      2/5,
    octave:           1/2,
    major-seventh:    8/15,
    minor-seventh:    9/16,
    major-sixth:      3/5,
    golden:           1/1.618,
    minor-sixth:      5/8,
    fifth:            2/3,
    augmented-fourth: 1/1.4142135,
    fourth:           3/4,
    major-third:      4/5,
    minor-third:      5/6,
    major-second:     8/9,
    minor-second:     15/16,
    prime:            1/1
)!default;

$smash-lh: round($smash-fs0 / map-get($smash-ratios, fifth))!default;

$smash-ratio: map-get($smash-ratios, fifth)!default;
$smash-number1: $smash-fs0 * 1!default;
$smash-number2: $smash-fs0 * 2!default;
$smash-offset:         0!default;

$smash-amplitude: 10!default;
$smash-scale1: $smash-number1;
$smash-scale2: $smash-number2;
$smash-i: 0;

@while $smash-i < $smash-amplitude
{
  $smash-next1: nth($smash-scale1, length($smash-scale1)) / $smash-ratio;
  $smash-next2: nth($smash-scale2, length($smash-scale2)) / $smash-ratio;
  
  $smash-prev1: nth($smash-scale1, 1) * $smash-ratio;
  $smash-prev2: nth($smash-scale2, 1) * $smash-ratio;
    
  $smash-scale1: join($smash-scale1, $smash-next1);
  $smash-scale2: join($smash-scale2, $smash-next2);
  
  $smash-scale1: join($smash-prev1, $smash-scale1);
  $smash-scale2: join($smash-prev2, $smash-scale2);
  
  $smash-i: $smash-i + 1;
}

@import 'SassyLists';

$smash-scale: sl-sort(join($smash-scale1, $smash-scale2));

$smash-roundscale: ();

@each $smash-step in $smash-scale
{
  $smash-roundscale: join($smash-roundscale, round($smash-step));
}

$smash-scale: $smash-roundscale;
$smash-scale: sl-remove-duplicates($smash-scale);

@function smash-strip-unit($smash-number)
{
    @return $smash-number / ($smash-number * 0 + 1);
}
@function smash-em($smash-px, $smash-contexte: $smash-fs0)
{
    @return(smash-strip-unit($smash-px) / smash-strip-unit($smash-contexte) * 1em);
}
@function smash-pt($smash-px)
{
    @return(smash-strip-unit($smash-px) * map-get($smash-ratios, fourth)  * 1pt);
}
@function smash-rem($smash-px)
{
    @if $smash-rem
    {
        @return(smash-strip-unit($smash-px) / smash-strip-unit($smash-fs0) * 1rem);
    }
    @else
    {
        @return(smash-strip-unit($smash-px) * 1px);
    }
}
@function smash-pourcent($smash-px, $smash-contexte: smash-grid-cols-width($smash-cols))
{
    @return(smash-strip-unit($smash-px) * 100 / smash-strip-unit($smash-contexte) * 1%);
}
@function smash-grid-cols-width($smash-col-nb: 1)
{
    @return ($smash-col * $smash-col-nb) + ($smash-gutter * ($smash-col-nb - 1));
}
@function smash-grid-col-width($smash-col-nb: 1, $smash-context: 1, $smash-gutter-smash-pourcent: smash-pourcent($smash-gutter))
{
    $smash-gutter-nb: $smash-col-nb - 1;

    @return (100% - (smash-strip-unit($smash-gutter-smash-pourcent) * $smash-gutter-nb * $smash-context)) / $smash-col-nb;
}
@function smash-lines($smash-font-size, $smash-line-height: $smash-lh)
{
	$smash-lines: ceil(2 * $smash-font-size / $smash-line-height) / 2;
	
	@if($smash-lines * $smash-line-height - $smash-font-size) < 2px
	{
		$smash-lines: $smash-lines + 0.5;
	}
	
	@return $smash-lines;
}

@function smash-scale($smash-level: 0)
{
  $smash-start: nth($smash-scale1, $smash-amplitude + 1);

  @return nth($smash-scale, index($smash-scale, $smash-start) + $smash-level + $smash-offset);
}

@function smash-lighten($smash-color, $smash-percentage)
{
  @return mix($smash-color, white, $smash-percentage);
}

@function smash-darken($smash-color, $smash-percentage)
{
  @return mix($smash-color, black, $smash-percentage);
}


@mixin smash-clearfix
{
    zoom: 1;

    &:before,
    &:after
    {
        content: '';
        display: table;
    }
    &:after
    {
        clear: both;
    }
}
@mixin smash-reset
{
	margin:  0!important;
	padding: 0!important;
	border:  0!important;
	background-color: transparent;
	list-style-type: none;
}
@mixin smash-visually-hidden
{
    position: absolute!important;
    padding: 0!important;
    border:  0!important;
    height:  1px!important;
    width:   1px!important;
    clip: rect(1px  1px  1px  1px);
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
}
@mixin smash-visually-visible
{

    position: static!important;
    height:  auto!important;
    width:   auto!important;
    clip:    auto;
    overflow: visible;
}
@mixin smash-deco-roll
{
    text-decoration: none;

    &:hover,
    &:focus
    {
        text-decoration: underline;
    }
}
@mixin smash-deco-unroll
{
    text-decoration: underline;
    
    &:hover,a
    &:focus
    {
        text-decoration: none;
    }
}
@mixin smash-stretch($smash-length: 0)
{
    position: absolute;
    
    left:   $smash-length;
    top:    $smash-length;
    bottom: $smash-length;
    right:  $smash-length;
    
    @if smash-strip-unit($smash-length) < -999
    {
        margin: auto;
    }
}
@mixin smash-typo($smash-fs, $smash-context: $smash-fs0)
{
    font-size:     smash-em($smash-fs, $smash-context);
    margin-bottom: smash-em($smash-lh, $smash-fs);
    line-height:   smash-em(smash-lines($smash-fs) * $smash-lh, $smash-fs);
}

.smash-unit
{
  $smash-fs1: 20px;
  
  width: smash-strip-unit(1em);
  width: smash-strip-unit(2px);
  width: smash-strip-unit(3%);
  height: smash-em($smash-fs1);
  
  .smash-unit
  {
    $smash-fs2: 40px;
    
    height: smash-em($smash-fs1, $smash-fs2);
  }
  
  height: smash-pt(20px);
  height: smash-rem(20px);
  height: smash-pourcent(20px);
  height: smash-pourcent(20px, 40px);
}
.smash-grid-cols-width
{
  width: smash-grid-cols-width();
  width: smash-grid-cols-width(2);
  width: smash-grid-cols-width(3);
  width: smash-grid-cols-width(4);
}
.smash-grid-col-width
{
  width: smash-grid-col-width();
  width: smash-grid-col-width(2);
  width: smash-grid-col-width(3);
  width: smash-grid-col-width(4);
}
.smash-lines
{
  height: smash-lines(40px);
  height: smash-lines(40px, 40px);
}
.smash-scale
{
  font-size: smash-scale(-1);
  font-size: smash-scale();
  font-size: smash-scale(1);
  font-size: smash-scale(2);
}

.smash-clearfix
{
  @include smash-clearfix;
}
.smash-reset
{
  @include smash-reset;
}
.smash-visually-hidden
{
  @include smash-visually-hidden;
}
.smash-visually-visible
{
  @include smash-visually-visible;
}
.smash-deco-roll
{
  @include smash-deco-roll;
}
.smash-deco-unroll
{
  @include smash-deco-unroll;
}
.smash-stretch
{
  @include smash-stretch;
}
.smash-stretch-super
{
  @include smash-stretch(-999em);
}
.smash-typo
{
  $smash-fs1: 20px;
  
  @include smash-typo($smash-fs1);
  
  .smash-typo
  {
    $smash-fs2: 40px;
    
    @include smash-typo($smash-fs2, $smash-fs1);
  }
}
.smash-color
{
  color: smash-lighten($smash-debug,  50%);
  color: smash-darken( $smash-debug,  50%);
}

SassMeister-output.css

.smash-unit {
  width: 1;
  width: 2;
  width: 3;
  height: 1.25em;
  height: 15pt;
  height: 1.25rem;
  height: 2.13675%;
  height: 50%;
}
.smash-unit .smash-unit {
  height: 0.5em;
}

.smash-grid-cols-width {
  width: 72px;
  width: 168px;
  width: 264px;
  width: 360px;
}

.smash-grid-col-width {
  width: 100%;
  width: 48.71795%;
  width: 31.62393%;
  width: 23.07692%;
}

.smash-lines {
  height: 2;
  height: 1.5;
}

.smash-scale {
  font-size: 14px;
  font-size: 16px;
  font-size: 21px;
  font-size: 24px;
}

.smash-clearfix {
  zoom: 1;
}
.smash-clearfix:before, .smash-clearfix:after {
  content: '';
  display: table;
}
.smash-clearfix:after {
  clear: both;
}

.smash-reset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent;
  list-style-type: none;
}

.smash-visually-hidden {
  position: absolute !important;
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}

.smash-visually-visible {
  position: static !important;
  height: auto !important;
  width: auto !important;
  clip: auto;
  overflow: visible;
}

.smash-deco-roll {
  text-decoration: none;
}
.smash-deco-roll:hover, .smash-deco-roll:focus {
  text-decoration: underline;
}

.smash-deco-unroll {
  text-decoration: underline;
}
.smash-deco-unroll:hover, a
.smash-deco-unroll:focus {
  text-decoration: none;
}

.smash-stretch {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.smash-stretch-super {
  position: absolute;
  left: -999em;
  top: -999em;
  bottom: -999em;
  right: -999em;
}

.smash-typo {
  font-size: 1.25em;
  margin-bottom: 1.2em;
  line-height: 1.2em;
}
.smash-typo .smash-typo {
  font-size: 2em;
  margin-bottom: 0.6em;
  line-height: 1.2em;
}

.smash-color {
  color: #7fff7f;
  color: #007f00;
}

SassMeister-rendered.html

<h1 class="h2">Classes</h1>
<p><a href="http://codepen.io/vincent-valentin/pen/QwgZeg">Voir sur CodePen</a></p>