lazycss
Helper to bring some comforts to writing css
Basic feature list & goal:
- Number to px
- Hex to rgba
- Nesting
- Global unique namepacing
- Auto change detection
- ...
And here's some code! 👍
Basic 1:
var css =
Result
// css.raw.container { height:400px; background-color:rgba(170,187,204,0.86);}.container:hover { background-color:rgba(221,34,51,0.86);}.container * { box-sizing:border-box;}.container .sidebar { display:inline-block; width:200px; height:100%; background-color:green;}.container .main { display:inline-block; width:calc(100% - 200px); height:100%; background-color:lightgreen;}//css.minified.container{height:400px;background-color:rgba(170,187,204,0.86);}.container:hover{background-color:rgba(221,34,51,0.86);}.container *{box-sizing:border-box;}.container .sidebar{display:inline-block;width:200px;height:100%;background-color:green;}.container .main{display:inline-block;width:calc(100%-200px);height:100%;background-color:lightgreen;}
Motivation
- Too lazy to switch files & context to do job
- Like to write
hover
instead:hover
- Wanted hex with alpha channel
Installation
<script src="lazycss.min.js"></script>
npm i lazycss
API
- Create new style holder
var css = // append a style element to document head if not appended, else edit text content// future change only part of text that was changed in css objectcss// get compiled stylecssraw// get minified stylecssminified// get compiled & minified stylecsscss // { css.raw, css.minified }
Plan
- Have diffing when updating
- More comfortable syntax for complex css
License
.MIT