Build CSS with JSON and use the full power of JavaScript instead of reinventing wheel with precompilers.
Play with example code in here: http://jussir.net/#/edit/jsonCssExample
blackBox =
padding: 10
background: 'black'
color: 'white'
cssDefinitions =
'.jsonCssExample':
# camelCase poperty names transform to kebab-case, e.g.
# borderRadius -> border-radius
borderRadius: "10px"
# pixel values can be defined with plain numbers:
padding: 10
background: 'white'
color: 'black'
h1:
fontSize: 14
# & -sign can be used to mixin definition to parent
'&': blackBox
# unlike with jsonHtml, whitespace characters do matter
'&.second':
color: "hsl(120, 90%, 45%)"
ul:
padding: blackBox.padding
li:
# add -v to property to create vendor prefixes
"filter -v": "blur(2px)"
'.remove':
color: 'red'
margin: 10
# nested definitions can also be define in one string
'body pre': blackBox
jsonCss.addStyles(styleId, cssDefinitions)↓
.jsonCssExample {
border-radius: 10px;
padding: 10px;global
background: white;
color: black;
}
.jsonCssExample h1 {
font-size: 14px;
}
.jsonCssExample h1 {
padding: 10px;
background: black;
color: white;
}
.jsonCssExample h1.second {
color: hsl(120, 90%, 45%);
}
.jsonCssExample ul {
padding: 10px;
}
.jsonCssExample ul li {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
.jsonCssExample .remove {
color: red;
margin: 10px;
}
body pre {
padding: 10px;
background: black;
color: white;
}Just import dist/jsonCss.min.js
Library uses CommonJS syntax for export, or window.jsonCss when local 'module' variable not defined.
With JSPM, it can be installed directly: jspm install github:jussiry/jsonCss
Combine with jsonHtml to create compact UI modules with HTML, JS, and controller all in same file. See an example here.
This library is a fork from James Campos's CCSS
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent