Yet another alternative to CSS, with variables, functions, mixins. But now it's all js.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
README.md
package.json
styleless.js

README.md

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',
  a: {
    'text-decoration': 'none',

    ':hover': {
      'border-width': '1px'
    }
  }
}

} })

#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;
}
}