Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="col-2">
    <h3>Titre</h3>
  </div>
</div> 

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";

// Globals
$em-base: 16 !default;
$base-line-height: 1.5 !default;

// Neat Grid Debug : visual grid
$visual-grid: true !default;
$visual-grid-color: #E6F6FF !default;
$visual-grid-opacity: 0.8 !default;
$visual-grid-index: back !default;

// Base-line height debug
$baseline-grid-show: false !default;
$baseline-grid-color : ff0000 !default;
// ------------------------------------------------*/
// Set the grid :
// http://gridulator.com/
// http://grid.guide/
// ------------------------------------------------*/
$max-width: 960px;
$column: em(106);
$gutter: em(16);
$grid-columns: 8;

// NEAT
@import "neat/neat";

// ------------------------------------------------*/
// 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;


// ------------------------------------------------*/
// 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
// ------------------------------------------------*/

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

$breakpoints: (
  'phone>': ('min-width 480px', 8)
);


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

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


.container {
  @include outer-container();
}
.col-2{
  border: 1px solid black;
  @include media($bp-l){
    @include span-columns(3);
  }
  @include media($bp-xl){
    @include span-columns(5);
  }
  
}
@include media($bp-xs){
    body::before{
      content:"Breakpoint : xsmall plus";
    }
}
@include media($bp-s){
    body::before{
      content:"Breakpoint : small plus";
    }
}
@include media($bp-m){
    body::before{
      content:"Breakpoint : medium plus";
    }
}

@include media($bp-l){
    body::before{
      content:"Breakpoint : large plus";
    }
}
@include media($bp-xl){
    body::before{
      content:"Breakpoint : xlarge plus";
    }
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

body:before {
  background-image: -webkit-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
  background-image: -moz-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
  background-image: -ms-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
  background-image: -o-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
  background-image: linear-gradient(to left, transparent 0, #E6F6FF 0, #E6F6FF 11.04167%, transparent 11.04167%, transparent 12.70833%, #E6F6FF 12.70833%, #E6F6FF 23.75%, transparent 23.75%, transparent 25.41667%, #E6F6FF 25.41667%, #E6F6FF 36.45833%, transparent 36.45833%, transparent 38.125%, #E6F6FF 38.125%, #E6F6FF 49.16667%, transparent 49.16667%, transparent 50.83333%, #E6F6FF 50.83333%, #E6F6FF 61.875%, transparent 61.875%, transparent 63.54167%, #E6F6FF 63.54167%, #E6F6FF 74.58333%, transparent 74.58333%, transparent 76.25%, #E6F6FF 76.25%, #E6F6FF 87.29167%, transparent 87.29167%, transparent 88.95833%, #E6F6FF 88.95833%, #E6F6FF 100%, transparent 100%);
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  margin: 0 auto;
  max-width: 960px;
  opacity: 0.8;
  pointer-events: none;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: -1;
}

/* # @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
*/
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.container::after {
  clear: both;
  content: "";
  display: table;
}

.col-2 {
  border: 1px solid black;
}

@media screen and (min-width: 60em) {
  .col-2 {
    float: left;
    display: block;
    margin-right: 1.66667%;
    width: 36.45833%;
  }
  .col-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 71.25em) {
  .col-2 {
    float: left;
    display: block;
    margin-right: 1.66667%;
    width: 61.875%;
  }
  .col-2:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 20em) {
  body::before {
    content: "Breakpoint : xsmall plus";
  }
}

@media screen and (min-width: 30em) {
  body::before {
    content: "Breakpoint : small plus";
  }
}

@media screen and (min-width: 48em) {
  body::before {
    content: "Breakpoint : medium plus";
  }
}

@media screen and (min-width: 60em) {
  body::before {
    content: "Breakpoint : large plus";
  }
}

@media screen and (min-width: 71.25em) {
  body::before {
    content: "Breakpoint : xlarge plus";
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="col-2">
    <h3>Titre</h3>
  </div>
</div>