Yet another alternative to CSS, with variables, functions, mixins. But now it's all js.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
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;
}
}