Generated by SassMeister.com.

10/30/2015 - 12:40 PM

Generated by SassMeister.com.

<main class="debug">
  <h1>Summary</h1>
  <div class="block">
      <h2>Bloc 1</h2>
  </div>
  
  
</main>

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 6.17215%, transparent 6.17215%, transparent 8.5298%, #E6F6FF 8.5298%, #E6F6FF 14.70196%, transparent 14.70196%, transparent 17.05961%, #E6F6FF 17.05961%, #E6F6FF 23.23176%, transparent 23.23176%, transparent 25.58941%, #E6F6FF 25.58941%, #E6F6FF 31.76157%, transparent 31.76157%, transparent 34.11922%, #E6F6FF 34.11922%, #E6F6FF 40.29137%, transparent 40.29137%, transparent 42.64902%, #E6F6FF 42.64902%, #E6F6FF 48.82117%, transparent 48.82117%, transparent 51.17883%, #E6F6FF 51.17883%, #E6F6FF 57.35098%, transparent 57.35098%, transparent 59.70863%, #E6F6FF 59.70863%, #E6F6FF 65.88078%, transparent 65.88078%, transparent 68.23843%, #E6F6FF 68.23843%, #E6F6FF 74.41059%, transparent 74.41059%, transparent 76.76824%, #E6F6FF 76.76824%, #E6F6FF 82.94039%, transparent 82.94039%, transparent 85.29804%, #E6F6FF 85.29804%, #E6F6FF 91.4702%, transparent 91.4702%, transparent 93.82785%, #E6F6FF 93.82785%, #E6F6FF 100%, transparent 100%);
  background-image: -moz-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 6.17215%, transparent 6.17215%, transparent 8.5298%, #E6F6FF 8.5298%, #E6F6FF 14.70196%, transparent 14.70196%, transparent 17.05961%, #E6F6FF 17.05961%, #E6F6FF 23.23176%, transparent 23.23176%, transparent 25.58941%, #E6F6FF 25.58941%, #E6F6FF 31.76157%, transparent 31.76157%, transparent 34.11922%, #E6F6FF 34.11922%, #E6F6FF 40.29137%, transparent 40.29137%, transparent 42.64902%, #E6F6FF 42.64902%, #E6F6FF 48.82117%, transparent 48.82117%, transparent 51.17883%, #E6F6FF 51.17883%, #E6F6FF 57.35098%, transparent 57.35098%, transparent 59.70863%, #E6F6FF 59.70863%, #E6F6FF 65.88078%, transparent 65.88078%, transparent 68.23843%, #E6F6FF 68.23843%, #E6F6FF 74.41059%, transparent 74.41059%, transparent 76.76824%, #E6F6FF 76.76824%, #E6F6FF 82.94039%, transparent 82.94039%, transparent 85.29804%, #E6F6FF 85.29804%, #E6F6FF 91.4702%, transparent 91.4702%, transparent 93.82785%, #E6F6FF 93.82785%, #E6F6FF 100%, transparent 100%);
  background-image: -ms-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 6.17215%, transparent 6.17215%, transparent 8.5298%, #E6F6FF 8.5298%, #E6F6FF 14.70196%, transparent 14.70196%, transparent 17.05961%, #E6F6FF 17.05961%, #E6F6FF 23.23176%, transparent 23.23176%, transparent 25.58941%, #E6F6FF 25.58941%, #E6F6FF 31.76157%, transparent 31.76157%, transparent 34.11922%, #E6F6FF 34.11922%, #E6F6FF 40.29137%, transparent 40.29137%, transparent 42.64902%, #E6F6FF 42.64902%, #E6F6FF 48.82117%, transparent 48.82117%, transparent 51.17883%, #E6F6FF 51.17883%, #E6F6FF 57.35098%, transparent 57.35098%, transparent 59.70863%, #E6F6FF 59.70863%, #E6F6FF 65.88078%, transparent 65.88078%, transparent 68.23843%, #E6F6FF 68.23843%, #E6F6FF 74.41059%, transparent 74.41059%, transparent 76.76824%, #E6F6FF 76.76824%, #E6F6FF 82.94039%, transparent 82.94039%, transparent 85.29804%, #E6F6FF 85.29804%, #E6F6FF 91.4702%, transparent 91.4702%, transparent 93.82785%, #E6F6FF 93.82785%, #E6F6FF 100%, transparent 100%);
  background-image: -o-linear-gradient(left, transparent 0, #E6F6FF 0, #E6F6FF 6.17215%, transparent 6.17215%, transparent 8.5298%, #E6F6FF 8.5298%, #E6F6FF 14.70196%, transparent 14.70196%, transparent 17.05961%, #E6F6FF 17.05961%, #E6F6FF 23.23176%, transparent 23.23176%, transparent 25.58941%, #E6F6FF 25.58941%, #E6F6FF 31.76157%, transparent 31.76157%, transparent 34.11922%, #E6F6FF 34.11922%, #E6F6FF 40.29137%, transparent 40.29137%, transparent 42.64902%, #E6F6FF 42.64902%, #E6F6FF 48.82117%, transparent 48.82117%, transparent 51.17883%, #E6F6FF 51.17883%, #E6F6FF 57.35098%, transparent 57.35098%, transparent 59.70863%, #E6F6FF 59.70863%, #E6F6FF 65.88078%, transparent 65.88078%, transparent 68.23843%, #E6F6FF 68.23843%, #E6F6FF 74.41059%, transparent 74.41059%, transparent 76.76824%, #E6F6FF 76.76824%, #E6F6FF 82.94039%, transparent 82.94039%, transparent 85.29804%, #E6F6FF 85.29804%, #E6F6FF 91.4702%, transparent 91.4702%, transparent 93.82785%, #E6F6FF 93.82785%, #E6F6FF 100%, transparent 100%);
  background-image: linear-gradient(to left, transparent 0, #E6F6FF 0, #E6F6FF 6.17215%, transparent 6.17215%, transparent 8.5298%, #E6F6FF 8.5298%, #E6F6FF 14.70196%, transparent 14.70196%, transparent 17.05961%, #E6F6FF 17.05961%, #E6F6FF 23.23176%, transparent 23.23176%, transparent 25.58941%, #E6F6FF 25.58941%, #E6F6FF 31.76157%, transparent 31.76157%, transparent 34.11922%, #E6F6FF 34.11922%, #E6F6FF 40.29137%, transparent 40.29137%, transparent 42.64902%, #E6F6FF 42.64902%, #E6F6FF 48.82117%, transparent 48.82117%, transparent 51.17883%, #E6F6FF 51.17883%, #E6F6FF 57.35098%, transparent 57.35098%, transparent 59.70863%, #E6F6FF 59.70863%, #E6F6FF 65.88078%, transparent 65.88078%, transparent 68.23843%, #E6F6FF 68.23843%, #E6F6FF 74.41059%, transparent 74.41059%, transparent 76.76824%, #E6F6FF 76.76824%, #E6F6FF 82.94039%, transparent 82.94039%, transparent 85.29804%, #E6F6FF 85.29804%, #E6F6FF 91.4702%, transparent 91.4702%, transparent 93.82785%, #E6F6FF 93.82785%, #E6F6FF 100%, transparent 100%);
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  margin: 0 auto;
  max-width: 68em;
  opacity: 0.6;
  pointer-events: none;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: -1;
}

/** Colors
Generates classes to change type and background colors from the colors
set in `_globals.scss` => state.
*/
.text--muted {
  color: #aaa !important;
}

.bg--muted {
  background-color: #aaa !important;
}

.text--primary {
  color: #4591aa !important;
}

.bg--primary {
  background-color: #4591aa !important;
}

.text--success {
  color: #45ca69 !important;
}

.bg--success {
  background-color: #45ca69 !important;
}

.text--info {
  color: #9cc4ca !important;
}

.bg--info {
  background-color: #9cc4ca !important;
}

.text--warning {
  color: #ffb800 !important;
}

.bg--warning {
  background-color: #ffb800 !important;
}

.text--error {
  color: #ca4829 !important;
}

.bg--error {
  background-color: #ca4829 !important;
}

/* # @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/40/ff0000");
}

main {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.6875em;
  line-height: 23.7037em;
}

main::after {
  clear: both;
  content: "";
  display: table;
}

main.debug {
  border: 1px solid red;
}

main.debug .block {
  border: 1px solid green;
}

h1 {
  text-align: center;
}

.block {
  box-sizing: border-box;
  height: 1.5;
  padding: 10px;
}

SassMeister-input.scss

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

@import "bourbon/bourbon";

$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.6 !default;
$visual-grid-index: back !default;

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

// NEAT
@import "neat/neat";


$colours: (
  amber: #ffc107,
  black: #222,
  blue: #2196F3,
  blue-light: #03a9f4,
  blue-grey: #607d8b,
  brown: #795548,
  cyan: #00bcd4,
  green: #4caf50,
  green-light: #8bc34a,
  grey: #9e9e9e,
  indigo: #3f51b5,
  lime: #cddc39,
  orange: #ff9800,
  orange-dark: #ff5722,
  pink: #E91E63,
  purple: #9c27b0,
  purple-deep: #673ab7,
  red: #ff4136,
  teal: #009688,
  white: #FFF,
  yellow: #ffeb3b,
) !default;

@function get-colour($colour) {
  @if map-has-key($colours, $colour) {
    $colour: map-get($colours, $colour);
  } @else {
    @if type-of($colour) != colour {
      @error "Colour name: `#{$colour}` not found.";
    }
  }
  @return $colour;
}

$colors: (
  base: (
    "primary":   #4591aa,
    "selection": #d6d6d6,
    "lines":     #e0e0e0
  ),

  text: (
    "primary":   #555,
    "secondary": #666,
    "heading":   #222,
    "ui":        white
  ),

  background: (
    "dark":  #282E31,
    "light": #f5f5f5,
    "body":  white
  ),

  state: (
    "muted":   #aaa,
    "primary": #4591aa,
    "success": #45ca69,
    "info":   #9cc4ca,
    "warning": #ffb800,
    "error":   #ca4829
  ),

  blue: (
    "darker":  #495b61,
    "dark":    #447281,
    "base":    #4591aa,
    "light":   #5ab0cc,
    "lighter": #74cbe8
  ),

  green: (
    "darker":  #3b6e6e,
    "dark":    #3b8686,
    "base":    #37a1a1,
    "light":   #2dbaba,
    "lighter": #69d1d1
  ),

  cream: (
    "darker":  #c47858,
    "dark":    #e29372,
    "base":    #ecac91,
    "light":   #f9c2ab,
    "lighter": #fdd5c3
  ),

  red: (
    "darker":  #653131,
    "dark":    #b73333,
    "base":    #da3c3c,
    "light":   #f25a5a,
    "lighter": #fa8181
  ),

  gray: (
    "darker":  #333333,
    "dark":    #4d4d4d,
    "base":    #666666,
    "light":   #808080,
    "lighter": #999999
  )
) !default;
/** Colors
Generates classes to change type and background colors from the colors
set in `_globals.scss` => state.
*/
@each $color-name, $color in $colors {
  @each $color-type, $color-value in $color {
    @if $color-name == "state" {
      .text--#{$color-type} {
        color: $color-value !important;
      }

      .bg--#{$color-type} {
        background-color: $color-value !important;
      }
    }
  }
}

/* # @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 $base-line-height;
}


// Custom Settings
$em-base: em(27);
$base-line-height: em(40);
//-------------------------------------------*/
// USAGE
//-------------------------------------------*/

@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}'); 
    }
}

// LAYOUT

main{
  @include outer-container();
  font-size: $em-base;
  line-height: $base-line-height;
  &.debug {
    border: 1px solid red;
    .block{
      border:1px solid green;
    }
  }
}

h1{
  text-align:center;
}

.block {

  box-sizing: border-box;
  height: vertical-rythm(10);
  padding:10px;
}

SassMeister-input-HTML.html

<main class="debug">
  <h1>Summary</h1>
  <div class="block">
      <h2>Bloc 1</h2>
  </div>
  
  
</main>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Generated by SassMeister.com.