Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

/* Data Types */

// Numbers
body {
  margin: 100px; // numbers with units
  line-height: 1.5; // decimal numbers without units
  font-weight: 800; // whole numbers without units
  padding: 1%;
}


// String
.container {
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
  
  &:before {
    content: "This is a pseudo-element";
  }
}

// Interpolation: Quoted strings will be unquote, eg:
$string: "element";
.container-#{$string} {
  margin: 0;
}


// Colors
.btn {
  color: #ccc;
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, .5);
  border-top-color: hsl(155, 33%, 65%);
  border-bottom-color: blue;
}


// Lists
.sidebar {
  padding: 3em;
  margin: 1em 2em 3em 4em;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 0 3px #999, 10px 10px 20px #555;
}

body.serif {
  font: 400 15px/1.5 Georgia, serif;
}


// Maps
$colors: (
  1: #89C3AB,
  2: #636363
);

$additional-colors: (
  'color-1': red,
  'color-2': blue
);

$margins: (
  tight: 10px 20px,
  compact: 30px,
  large: 5em
);

// If the  inner lists have the same separator as the outer list, use parantheses
$fonts: (
  option-1: (Arial, sans-serif),
  option-2: (Helvetica, sans-serif)
);

footer {
  background-color: map-get($colors, 1);
  border-color: map-get($additional-colors, 'color-2');
  margin: map-get($margins, compact);
  padding: map-get($margins, tight);
  font-family: map-get($fonts, option-1);
}

SassMeister-output.css

/* Data Types */
body {
  margin: 100px;
  line-height: 1.5;
  font-weight: 800;
  padding: 1%;
}

.container {
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
}
.container:before {
  content: "This is a pseudo-element";
}

.container-element {
  margin: 0;
}

.btn {
  color: #ccc;
  background-color: white;
  border-color: rgba(255, 255, 255, 0.5);
  border-top-color: #88c3ab;
  border-bottom-color: blue;
}

.sidebar {
  padding: 3em;
  margin: 1em 2em 3em 4em;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 0 3px #999, 10px 10px 20px #555;
}

body.serif {
  font: 400 15px/1.5 Georgia, serif;
}

footer {
  background-color: #89C3AB;
  border-color: blue;
  margin: 30px;
  padding: 10px 20px;
  font-family: Arial, sans-serif;
}