FuncyTown Example 14

example14_funcystyle_variables - demonstrate use of variables in FuncyStyle

Raw HTML output:

Raw CSS output:

To Notice: Similar to other CSS preprocessor languages (e.g. SASS or LESS), FuncyStyle allows for variable to be used in defined styles, and for math and operations to be performed on those variables. For example, this FuncyStyle code:

var boxBG = 'red';
var boxFG = 'green';
var boxPadding = 16;

funcyStyle( '.box',
            { backgroundColor: boxBG,
              padding_px: boxPadding } );
funcyStyle( '#mytext',
            { backgroundColor: boxFG,
              color: boxBG,
              margin: 0,
              padding_px: boxPadding / 2 } );

generates this CSS:

.box {
  background-color:red;
  padding:16px;
}
#mytext {
  background-color:green;
  color:red;
  margin:0;
  padding:8px;
}

next: example15_style_nesting top: all js examples