Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

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

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

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

// LAYOUT

main{
  max-width:1170px;
  margin:0 auto;
  &.debug {
    border: 1px solid red;
    .block{
      border:1px solid green;
    }
  }
}

h1{
  text-align:center;
}

.block {
  height:200px;
  padding:10px;
}

SassMeister-output.css

main {
  max-width: 1170px;
  margin: 0 auto;
}

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

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

h1 {
  text-align: center;
}

.block {
  height: 200px;
  padding: 10px;
}

SassMeister-rendered.html

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