Generated by SassMeister.com.

SassMeister-input-HTML.html

<base target="_blank" />

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

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----

$lte-ie8: false;

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

$box-sizing: false;

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

$black:   #000!default;
$white:   #fff!default;
$green:   #0F0!default;

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

$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;

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

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

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

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

@import 'SassyLists';

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

$roundscale: ();

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

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

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

    @return (100% - (strip-unit($gutter-pourcent) * $gutter-nb * $context)) / $col-nb;
}
@function lines($font-size, $line-height: $lh)
{
  @return ceil(2 * $font-size / $line-height) / 2;
}
@function scale($level: 0)
{
  $start: nth($scale1, $amplitude + 1);

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



@mixin clearfix
{
    zoom: 1;

    &:before,
    &:after
    {
        content: '';
        display: table;
    }
    &:after
    {
        clear: both;
    }
}
@mixin reset
{
	margin:  0!important;
	padding: 0!important;
	border:  0!important;
	background-color: transparent;
	list-style-type: none;
}
@mixin 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 visually-visible
{

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

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

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

.clearfix
{
  @include clearfix;
}
.reset
{
  @include reset;
}
.visually-hidden
{
  @include visually-hidden;
}
.visually-visible
{
  @include visually-visible;
}
.roll
{
  @include roll;
}
.unroll
{
  @include unroll;
}
.stretch
{
  @include stretch;
}
.stretch-super
{
  @include stretch(-999em);
}
.typo
{
  $fs1: 20px;
  
  @include typo($fs1);
  
  .typo
  {
    $fs2: 40px;
    
    @include typo($fs2, $fs1);
  }
}

SassMeister-output.css

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

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

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

.lines {
  height: 2;
  height: 1;
}

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

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

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

.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;
}

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

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

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

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

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

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

SassMeister-rendered.html

<base target="_blank" />

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