Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="square"></div>
<div class="circle"></div>
<div class="triangle"></div>
<div class="list-container">
    <ul class="the-list">
        <li class="one">One</li>
        <li class="two">Two</li>
        <li class="three">Three</li>
        <li class="four">Four</li>
    </ul>
    
</div>

<button class="button1">Button1</button>
<button class="button2">Button2</button>

<ul class="hi">
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <liclass="hi" >hello</li>
</ul>

<ul>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

/* MAPS */
$themes: (
  featured: (
    header-color: #DCFAC0,
    header-size: 3em,
    text-color:   #00968B,
    border-color: #85C79C,
    link-color: #ff0000
  ),
  daily: (
    header-color: blue,
    header-size: 2em,
    text-color:   #C2454E,
    border-color: #FFB158,
    link-color: #bada55
  ),
);

@mixin call-map($property, $theme-name, $element) {
  $property: map-get(map-get($themes, $theme-name), $element);
}

@mixin themed-links($theme-name) {
  h1 {
    border-bottom: 1px solid (map-get(map-get($themes, $theme-name), border-color));
    font-size: map-get(map-get($themes, $theme-name), header-size);
    @include call-map(color, featured, header-color);
    
  }
  p {
    color: map-get(map-get($themes, $theme-name), text-color);
  }
  a {
    color: map-get(map-get($themes, $theme-name), link-color)
  }
}

.block {
  @include themed-links(featured);
}

/* MAKE SHAPES */
/* http://css-tricks.com/examples/ShapesOfCSS/ */

@mixin shape($shape, $size, $color){
  @if $shape == square {
    width: $size;
    height: $size;
    background-color: $color;
  }
  @if $shape == circle {
    width: $size;
    height: $size;
    background-color: $color;
    border-radius: 50%;
  }
  @if $shape == triangle {
    width: 0;
    height: 0;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size*2 solid $color;
  }
  @if $shape == diamond {
    width: 0;
    height: 0;
    border: $size solid transparent;
    border-bottom-color: $color;
    position: relative;
    top: -$size;
  
    &:after {
      content: '';
      position: absolute;
      left: -$size;
      top: $size;
      width: 0;
      height: 0;
      border: $size solid transparent;
      border-top-color: $color;
    }
  }
  @if $shape == pentagon {
    position: relative;
    width: $size;
    border-width: (25/27)*$size (1/3)*$size 0;
    border-style: solid;
    border-color: $color transparent;
    
    &:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: (-17/11)*$size;
      left: (-1/3)*$size;
      border-width: 0 (5/6)*$size (35/54)*$size;
      border-style: solid;
      border-color: transparent transparent $color;
    }
  }
  @if $shape == hexagon {
    width: $size*2;
    height: $size*1.1;
    background: $color;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: $size/-2;
      left: 0;
      width: 0;
      height: 0;
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-bottom: $size/2 solid $color;
    }
    &:after {
      content: "";
      position: absolute;
      bottom: $size/-2;
      left: 0;
      width: 0;
      height: 0;
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-top: $size/2 solid $color;
    }
  }
  @if shape == octogon {
    width: $size;
    height: $size;
    background: transparent;
    position: relative;
    text-align: center;
  
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 29/$size solid $color;
      border-left: 29/$size solid #eee;
      border-right: 29/$size solid #eee;
      width: 42/$size;
      height: 0;
    }
    
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29/$size solid $color;
      border-left: 29/$size solid #eee;
      border-right: 29/$size solid #eee;
      width: 42/$size;
      height: 0;
    }
  }
}

div {
  display: block;
}

.square{
  @include shape(square, 50px, red)
}

.circle{
  @include shape(circle, 50px, green)
}

.triangle{
  @include shape(triangle, 50px, yellow)
}

.diamond{
  @include shape(diamond, 50px, blue)
}

.pentagon {
  @include shape(pentagon, 60px, pink)
}

.hexagon {
  @include shape(hexagon, 50px, teal)
}

li:nth-child(2) {
    color: red;
}

$colors: (#000, #F00, #0F0, #00F);
@for $i from 1 through length($colors) {
   li:nth-of-type(#{$i}) {
       color: nth($colors, $i);
   }
}

@import "compass/utilities/color/contrast";

$contrasted-dark-default: #333333;
$contrasted-light-default: #e7e7e7;
$contrasted-lightness-threshold: 50%;

  
@mixin button($width, $color, $size) {
    $push-height: 2px;
    @if $size == "big" {
        $push-height: 6px;
    }
    background: $color;
	border: none;
	border-bottom: $push-height*2 darken($color, 20%) solid;
	@include contrasted($color);
	display: inline-block;
	font-size: 14px;
	margin-top: 0;
	text-indent: 0;
	width: auto;
	padding: 0.4em 2.5em;
	&:hover {
        @if lightness($color) > 50% { //if the color is light, we don't darken the border as much
            border-bottom: $push-height darken($color, 20%) solid; 
        }
        @else {
            border-bottom: $push-height darken($color, 80%) solid;
        }
		margin-top: $push-height;
		margin-bottom:0px;
	}
	&:active, &:focus {
    outline-color: transparent;
    outline-style: none;
		border-bottom: none;
		margin-top: $push-height*3;
		margin-bottom:-2px;
	}
}

button {
  position: absolute;
  margin: 200px;
}

.button1 {
  @include button(180px, #bbffc8, big);
}

.button2 {
  @include button(180px, brown, small);
  left: 200px;
}

// COLORS!

//FOR LOOP
$colors: red, orange, yellow, green, blue, purple;

@for $i from 1 through length($colors) {
	.hi:nth-of-type(#{$i}) {
		@include contrasted (nth($colors, $i)); 
	}
}

//MAP LOOP
@each $i, $color in (1: red, 2: orange, 3: yellow, 4: green) {
  .hi-2:nth-of-type(#{$i}){
    background-color: $color;
  }
}

SassMeister-output.css

/* MAPS */
.block h1 {
  border-bottom: 1px solid #85c79c;
  font-size: 3em;
}
.block p {
  color: #00968b;
}
.block a {
  color: red;
}

/* MAKE SHAPES */
/* http://css-tricks.com/examples/ShapesOfCSS/ */
div {
  display: block;
}

.square {
  width: 50px;
  height: 50px;
  background-color: red;
}

.circle {
  width: 50px;
  height: 50px;
  background-color: green;
  border-radius: 50%;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid yellow;
}

.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: blue;
  position: relative;
  top: -50px;
}
.diamond:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: blue;
}

.pentagon {
  position: relative;
  width: 60px;
  border-width: 55.55556px 20px 0;
  border-style: solid;
  border-color: pink transparent;
}
.pentagon:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  top: -92.72727px;
  left: -20px;
  border-width: 0 50px 38.88889px;
  border-style: solid;
  border-color: transparent transparent pink;
}

.hexagon {
  width: 100px;
  height: 55.0px;
  background: teal;
  position: relative;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid teal;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid teal;
}

li:nth-child(2) {
  color: red;
}

li:nth-of-type(1) {
  color: black;
}

li:nth-of-type(2) {
  color: red;
}

li:nth-of-type(3) {
  color: lime;
}

li:nth-of-type(4) {
  color: blue;
}

button {
  position: absolute;
  margin: 200px;
}

.button1 {
  background: #bbffc8;
  border: none;
  border-bottom: 12px #55ff76 solid;
  background-color: #bbffc8;
  color: #333333;
  display: inline-block;
  font-size: 14px;
  margin-top: 0;
  text-indent: 0;
  width: auto;
  padding: 0.4em 2.5em;
}
.button1:hover {
  border-bottom: 6px #55ff76 solid;
  margin-top: 6px;
  margin-bottom: 0px;
}
.button1:active, .button1:focus {
  outline-color: transparent;
  outline-style: none;
  border-bottom: none;
  margin-top: 18px;
  margin-bottom: -2px;
}

.button2 {
  background: brown;
  border: none;
  border-bottom: 4px #541515 solid;
  background-color: brown;
  color: #e7e7e7;
  display: inline-block;
  font-size: 14px;
  margin-top: 0;
  text-indent: 0;
  width: auto;
  padding: 0.4em 2.5em;
  left: 200px;
}
.button2:hover {
  border-bottom: 2px black solid;
  margin-top: 2px;
  margin-bottom: 0px;
}
.button2:active, .button2:focus {
  outline-color: transparent;
  outline-style: none;
  border-bottom: none;
  margin-top: 6px;
  margin-bottom: -2px;
}

.hi:nth-of-type(1) {
  background-color: red;
  color: #e7e7e7;
}

.hi:nth-of-type(2) {
  background-color: orange;
  color: #333333;
}

.hi:nth-of-type(3) {
  background-color: yellow;
  color: #333333;
}

.hi:nth-of-type(4) {
  background-color: green;
  color: #e7e7e7;
}

.hi:nth-of-type(5) {
  background-color: blue;
  color: #e7e7e7;
}

.hi:nth-of-type(6) {
  background-color: purple;
  color: #e7e7e7;
}

.hi-2:nth-of-type(1) {
  background-color: red;
}

.hi-2:nth-of-type(2) {
  background-color: orange;
}

.hi-2:nth-of-type(3) {
  background-color: yellow;
}

.hi-2:nth-of-type(4) {
  background-color: green;
}

SassMeister-rendered.html

<div class="square"></div>
<div class="circle"></div>
<div class="triangle"></div>
<div class="list-container">
    <ul class="the-list">
        <li class="one">One</li>
        <li class="two">Two</li>
        <li class="three">Three</li>
        <li class="four">Four</li>
    </ul>
    
</div>

<button class="button1">Button1</button>
<button class="button2">Button2</button>

<ul class="hi">
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <li class="hi">hello</li>
    <liclass="hi" >hello</li>
</ul>

<ul>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
    <li class="hi-2">hello2</li>
</ul>