var color = '#4D926F'
var variables = Style({
  '#header': { 
    color: color
  },
  h2: {
    color: color
  }
})
      

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}
      

function roundedCorners(radius) {
  return {
    'border-radius': radius,
    '-webkit-border-radius': radius,
    '-moz-border-radius': radius
  }
}
var mixins = Style({
  '#header': Style(roundedCorners('15px'), {
    color: 'red'
  }),
  '#footer': Style(roundedCorners('5px'), {
    background: 'blue'
  })
})
      

#header {
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  color: red;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background: blue;
}
      

var nestedRules = Style({
  '#header': {
    h1: {
      'font-size': '26px',
      'font-weight': 'bold'
    },
    p: {
      'font-size': '12px',
  a: {
    'text-decoration': 'none',

    ':hover': {
      'border-width': '1px'
    }
  }
}

}
})

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

var atRules = Style({
  '@import': '"include.css"',
  '@media screen': {
   head: {
       p: {
           color: 'red'
       }
   }
})
      

@import "include.css"
@media screen {
head p {
    color: red;
}
}