Generated by SassMeister.com.

SassMeister-input-HTML.markdown

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in erat ut urna cursus vestibulum. Phasellus tempus. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Pellentesque dapibus hendrerit tortor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vivamus consectetuer hendrerit lacus. Curabitur at lacus ac velit ornare lobortis. In hac habitasse platea dictumst.

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";

// Responsive type with Bourbon
// Useful links :
// http://www.pearsonified.com/typography/
// http://www.modularscale.com/
// http://bourbon.io/docs/#modular-scale

// Optimal line-height : $line-height-base ÷ $fontbase

/* Bourbon : ModularScale : Scaling Variables

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$major-sixth:      1.667;
$minor-seventh:    1.778;
$major-seventh:    1.875;
$octave:           2;
$major-tenth:      2.5;
$major-eleventh:   2.667;
$major-twelfth:    3;
$double-octave:    4;

## Tim Brown : molten-leading-or-fluid-line-height
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
> To find that line-height value, I used this formula: 
((current width − min-width)/(max-width − min-width)) × (line-height − min-line-height) + min-line-height = line-height. 
With actual values, that’s: 
((30em−15em)/(36em−15em)) × (1.4−1.3) + 1.3 = 1.371428571.

## Aligning type to baseline the right way with SASS
https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.u9iulamba
https://gist.github.com/razwan/10662500


*/

// Bourbon : Modular Scale settings
$modular-scale-ratio: $perfect-fourth;
$modular-scale-base: 1rem;


// Bourbon base em
$em-base: 16 !default;
$base-line-height: 1.5 !default;
$base-font-size: 16px !default;


// Base-line height debug
$baseline-grid-show: true !default;
$baseline-grid-color : ff0000 !default;

// ------------------------------------------------*/
// Sizes
// http://concisecss.com/documentation/core/breakpoints
// Media-queries Boilerplate : http://app.kodery.com/s/1075
// ------------------------------------------------*/

// xs
$extra-small: em(320);
// s
$small: em(480);
//$small: 480px;
// m
$medium: em(768);
// l
$large: em(960);
// xl
$extra-large: em(1140);

// ------------------------------------------------*/
// Breakpoints
// http://thoughtbot.github.io/neat-docs/latest/#new-breakpoint
// ------------------------------------------------*/

$xs: new-breakpoint(min-width $extra-small, 2);
$s: new-breakpoint(min-width $small, 4);
$m: new-breakpoint(min-width $medium , 8);
$l: new-breakpoint(min-width $large, 8);
$xl: new-breakpoint(min-width $extra-large, 8);

// ------------------------------------------------*/
// MIXINS & FUNCTIONS
// ------------------------------------------------*/
/* # @function vertical-rythme()


@global $em-base                - Bourbon/neat global
@global $base-line-height       - Bourbon/neat global
@param $multiplier              - number of time to repeat the base line height define by $em-base
@param $offset  (0 !default)    - Optional A scope to add
@param $em-base (16 !default)
@return                         - value in em

Styleguide libs.functions.vertical-rythm
*/
@function vertical-rythm($multiplier, $offset: 0, $em-base: 16, $base-line-height: 1.5){
    $vertical-rythm: $base-line-height * em($em-base);
    @return $vertical-rythm;
}


//-------------------------------------------*/
// Custom Settings
//-------------------------------------------*/
$em-base: 16;
$base-line-height: 1.5;


$base-vertical-rythm: $base-line-height * $base-font-size ;

//-------------------------------------------*/
// USAGE
//-------------------------------------------*/

// Utility Debug
@if $baseline-grid-show == true {
    html {
        $size: strip-units(($base-line-height * $base-font-size));
        background-image: url('http://basehold.it/i/#{$size}/#{$baseline-grid-color}'); 
    }
}

$max-width: 750px;

html {
  font-size: 100%;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    
    font-size: $base-font-size; 
    line-height: $base-line-height;
      
    max-width: $max-width;
    margin: 0 auto;
}

h1,h2,h3,h4,h5,h6,p{
  padding-top:0;
  margin:0;
  }

h1 { 
  $h1-font-size : modular-scale(5);
  font-size: $h1-font-size;
  line-height: (($base-line-height * $h1-font-size) / 2); // $base-line-height / $h1-font-size

  margin-bottom: $base-vertical-rythm * 1;
} // 50 ÷ 16 = 3.125

h2 {
  $h2-font-size : ceil(modular-scale(4));
  font-size: $h2-font-size;
  line-height: $base-line-height * $h2-font-size / 2 ;
  margin-bottom: $base-vertical-rythm * .5;
} // 37 ÷ 16 = 2.3125

h3 {
  $h3-font-size: ceil(modular-scale(3));
  font-size: $h3-font-size;
  line-height: $base-line-height * $h3-font-size / 2 ;
  margin-bottom: $base-vertical-rythm * .2;
} // 28 ÷ 16 = 1.75

h4{
  font-size: 1rem;
}

h5{
  font-size: ceil(modular-scale(1));
}
h6{
  font-size: $base-font-size;
  line-height: $base-line-height;
}

p {
  text-align: justify;
  line-height: $base-line-height + .2;
}

SassMeister-output.css

@charset "UTF-8";
/* Bourbon : ModularScale : Scaling Variables

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$major-sixth:      1.667;
$minor-seventh:    1.778;
$major-seventh:    1.875;
$octave:           2;
$major-tenth:      2.5;
$major-eleventh:   2.667;
$major-twelfth:    3;
$double-octave:    4;

## Tim Brown : molten-leading-or-fluid-line-height
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
> To find that line-height value, I used this formula: 
((current width − min-width)/(max-width − min-width)) × (line-height − min-line-height) + min-line-height = line-height. 
With actual values, that’s: 
((30em−15em)/(36em−15em)) × (1.4−1.3) + 1.3 = 1.371428571.

## Aligning type to baseline the right way with SASS
https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.u9iulamba
https://gist.github.com/razwan/10662500


*/
/* # @function vertical-rythme()


@global $em-base                - Bourbon/neat global
@global $base-line-height       - Bourbon/neat global
@param $multiplier              - number of time to repeat the base line height define by $em-base
@param $offset  (0 !default)    - Optional A scope to add
@param $em-base (16 !default)
@return                         - value in em

Styleguide libs.functions.vertical-rythm
*/
html {
  background-image: url("http://basehold.it/i/24/ff0000");
}

html {
  font-size: 100%;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: 750px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6, p {
  padding-top: 0;
  margin: 0;
}

h1 {
  font-size: 4.20873rem;
  line-height: 3.15655rem;
  margin-bottom: 24px;
}

h2 {
  font-size: 4rem;
  line-height: 3rem;
  margin-bottom: 12px;
}

h3 {
  font-size: 3rem;
  line-height: 2.25rem;
  margin-bottom: 4.8px;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 2rem;
}

h6 {
  font-size: 16px;
  line-height: 1.5;
}

p {
  text-align: justify;
  line-height: 1.7;
}

SassMeister-rendered.html

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Vivamus in erat ut urna cursus vestibulum. Phasellus tempus. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.<br>
Pellentesque dapibus hendrerit tortor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vivamus consectetuer hendrerit lacus. Curabitur at lacus ac velit ornare lobortis. In hac habitasse platea dictumst.</p>

<h1>Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>

<h3>Titre de niveau 3</h3>

<h4>Titre de niveau 4</h4>

<h5>Titre de niveau 5</h5>

<h6>Titre de niveau 6</h6>