styleless
Yet another alternative to CSS, with variables, functions, mixins. But now it's all js.
Install
npm install styleless
Examples
styleless | css |
---|---|
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', |
#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; } } |