node package manager

styleless

Yet another alternative to CSS, with variables, functions, mixins. But now it's all js.

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