json('import.json/vars.json')

@media queries-small
  body
    //string variable
    display nope
    //color calc
    color darken(color, 50%)
    //color calc rgb(a)
    background-color: darken(background-color, 50%)
    border-color: fade-color
    //color calc alias (i.e. "purple")
    outline-color: darken(bg, 50%)
    //number variable
    padding spacing
    //acts the same as regular variables
    outline 1.5 * spacing
    margin gutter * 2
    if awesome
      border red
    //rgba with single digit values
    text-decoration-color decoration-color
    text-shadow 0 1px shadow-color

//nested json variable
@media queries-large
  body
    //deep nested json variable
    -webkit-transition animate-special-out

.a
  prefix = '$'
  json('import.json/local-vars.json', true, prefix)
  color $params-color
  width 10px * $a
  height 10px * $b
  background $bg

.b
  color $params-color
  background-color alternate-color

vars = json('import.json/vars.json', { hash: true });

body
  display: vars.nope
  color: darken(vars.color, 50%)
  background-color: darken(vars.background-color, 50%)
  border-color: vars.fade-color
  outline-color: darken(vars.bg, 50%)
  padding: vars.spacing
  outline: 1.5 * vars.spacing
  margin: vars.gutter * 2
  -webkit-transition: vars.animate.special.out
  if vars.awesome
    border red

icons = json('import.json/icons.json', { hash: true, leave-strings: true });

.icon
  content: icons.menu

optional = json('import.json/optional.json', { hash: true, optional: true })

body
  test: typeof(optional) == 'null'
