Add markdown file documenting css.js features
This commit is contained in:
parent
f5f3794006
commit
f209112f58
1 changed files with 90 additions and 0 deletions
90
css.md
Normal file
90
css.md
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
# CSS
|
||||||
|
|
||||||
|
A simple module for generating CSS from JS and a helper for custom properties
|
||||||
|
aka. CSS variables.
|
||||||
|
|
||||||
|
## Interfaces
|
||||||
|
|
||||||
|
```js
|
||||||
|
import {css} from 'css.js'
|
||||||
|
|
||||||
|
// CamelCase will be turned into kebab-case
|
||||||
|
css({div: {backgroundColor: "red"}})
|
||||||
|
// will produce:
|
||||||
|
// div {background-color: red}
|
||||||
|
|
||||||
|
css({div: {
|
||||||
|
transition: ["border 1s", ["color", "2s"]]
|
||||||
|
}})
|
||||||
|
// will produce:
|
||||||
|
// div {transition: border 1s, color 12}
|
||||||
|
|
||||||
|
// Nesting will be resolved
|
||||||
|
css({
|
||||||
|
".foo": {
|
||||||
|
color: "purple",
|
||||||
|
".bar": {
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
".baz": {
|
||||||
|
color: "blue",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// will produce:
|
||||||
|
// .foo {color: purple}
|
||||||
|
// .foo .bar {color: red}
|
||||||
|
// .foo .baz {color: blue}
|
||||||
|
|
||||||
|
// Nested lists will be resolved too
|
||||||
|
css({
|
||||||
|
".foo": {
|
||||||
|
color: "purple",
|
||||||
|
".bar, .baz": {
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
// will produce:
|
||||||
|
// .foo {color: purple}
|
||||||
|
// .foo .bar, .foo .baz {color: red}
|
||||||
|
|
||||||
|
// A leading _ will remove the space when nesting
|
||||||
|
css({
|
||||||
|
".foo": {
|
||||||
|
color: "black",
|
||||||
|
"_bar": { color: "red" }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// will produce:
|
||||||
|
// .foo {color: black}
|
||||||
|
// .foobar {color: red}
|
||||||
|
|
||||||
|
// $ will be replaced with . for convenience
|
||||||
|
// This can be combined with _ for to avoid quoting keys
|
||||||
|
css({
|
||||||
|
$foo: {
|
||||||
|
_$bar$baz: {
|
||||||
|
color: 'red'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// will produce:
|
||||||
|
// .foo.bar.baz {color: red}
|
||||||
|
```
|
||||||
|
|
||||||
|
Variables helper:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import {variable as v} from 'css.js'
|
||||||
|
|
||||||
|
// Index for automatic hyphenation
|
||||||
|
v.fooBar.toString() // var(--foo-bar)
|
||||||
|
v.fooBar("Hello") // var(--foo-bar, Hello)
|
||||||
|
|
||||||
|
// Call for unchanged variable names
|
||||||
|
v("fooBar") // var(--fooBar)
|
||||||
|
v("fooBar", "Hello") // var(--fooBar, Hello)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
Loading…
Reference in a new issue