1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
|
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'
|