Mixins

SassMeister-input-HTML.html

<h1>Write Less With 'mixins'</h1>
<div id="container">
    <div></div>
    <div></div>
    <div></div>    
</div>

SassMeister-input.scss

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

body{
    background-color: #505050;
}

h1,h2,h3{
    text-align: center;
    color: white;
    font-family: Helvetica;
}

#container {
    margin-left: 33%;
    
    > div{
        margin: 10px;
        width: 100px;
        height: 100px;
        background-color: orange;
        display: inline-block;
        vertical-align: top;
    }    
    
    > :nth-child(1) {
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -ms-border-radius: 20px;
      -o-border-radius: 20px;
      border-radius: 20px;
    }
    
    > :nth-child(2) {
      -webkit-border-radius: 40px;
      -moz-border-radius: 40px;
      -ms-border-radius: 40px;
      -o-border-radius: 40px;
      border-radius: 40px;
    }
    
    > :nth-child(3) {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      border-radius: 50%;
    }
}



// @mixin border-radius($radius){
//     -webkit-border-radius: $radius;
//     -moz-border-radius: $radius;
//     -ms-border-radius: $radius;
//     -o-border-radius: $radius;
//     border-radius: $radius;
// }

// @mixin rel-position($top, $left){
//     position: relative;
//     top: $top;
//     left: $left;
// }

SassMeister-output.css

body {
  background-color: #505050;
}

h1, h2, h3 {
  text-align: center;
  color: white;
  font-family: Helvetica;
}

#container {
  margin-left: 33%;
}
#container > div {
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}
#container > :nth-child(1) {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
}
#container > :nth-child(2) {
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  border-radius: 40px;
}
#container > :nth-child(3) {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

SassMeister-rendered.html

<h1>Write Less With 'mixins'</h1>
<div id="container">
    <div></div>
    <div></div>
    <div></div>    
</div>